基于Vue3+ele-Plus+Ts封装高级搜索组件,支持JSON数据传入生成搜索条件

创建搜索组件 基于Vue3+ele-Plus+Ts封装高级搜索组件,支持JSON数据传入生成搜索条件_第1张图片







使用封装好的组件 search.config.ts






自定义JSON

// 配置department的serach区域的数据
const searchConfig = {
  formItem: [
    {
      type: 'input', // 类型
      label: '票据号码', // label
      placeholder: '请输入票据号码', // 提示信息
      prop: 'name', // 绑定数据
    },
    {
      type: 'select',
      label: '出票日期',
      placeholder: '请选择出票日期',
      prop: 'leader',
      optionList: [
        {
          label: '是',
          value: 1,
        },
        {
          label: '否',
          value: 0,
        },
      ],
    },
    {
      type: 'datePicker',
      label: '汇票到期日',
      placeholder: '请输入汇票到期日',
      prop: 'shouj',
    },
    {
      type: 'daterange',
      label: '创建时间',
      prop: 'createAt',
    },
  ],
}

export default searchConfig

你可能感兴趣的:(json,vue.js,javascript)