schema-select.md 1.43 KB

Schema Select 方案选择器

通过配置JSON Schema的方式快速生成一个选择器,与常规选择器不同的是,本选择器是表格型选择器。

c5c854dcf472ffa480e5dea1fbab58f22019c5fc/examples/views/docs/component/schema-select.md#">基础用法

schema设置配置项。

::: snippet schema设置配置项

<template>
  <z-schema-select v-model="model" size="small" :schema="schema" :api-search="searchAPI" label-key="name" value-key="id"></z-schema-select>
</template>

<script>
export default {
  data() {
    return {
      model: '',
      schema: {
        table: {
          props: {
            border: false
          },
          items: [
            { label: '姓名', prop: 'name', minWidth: 120 },
            { label: '年龄', prop: 'age', minWidth: 120 },
          ]
        }
      }
    }
  },
  methods: {
    searchAPI(params) {
      console.log('search', params);
      return new Promise(resolve => {
        setTimeout(() => {
          const list = [
            { id: '0', name: '李饼', age: 32, address: '地址0', status: '正常' },
            { id: '1', name: '陈拾', age: 20, address: '地址1', status: '正常' },
            { id: '3', name: '王七', age: 26, address: '地址3', status: '正常' },
            { id: '4', name: '崔倍', age: 27, address: '地址4', status: '正常' },
            { id: '5', name: '孙豹', age: 38, address: '地址5', status: '正常' },
          ];
          resolve([list, 37]);
        }, 500);
      });
    },
  }
}
</script>

:::