表格搜索组件

说明

表格搜索组件

使用

---

意见内容：

类型：

• 给点意见
• 售后问题

无数据

提交时间：

<template>
  <div class="t-input">
    <div class="content-main t-margin20">
      <Ot-SeachFrom :formOptions="formOptions" @onSearch="onSearch"></Ot-SeachFrom>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formOptions: [
        {
          label: "意见内容",
          prop: "content",
          element: "el-input",
        },
        {
          label: "类型",
          prop: "type",
          element: "el-select",
          options: [
            {
              label: "给点意见",
              value: "1",
            },
            {
              label: "售后问题",
              value: "2",
            },
          ],
        },

        {
          label: "提交时间",
          prop: "timeRange",
          element: "el-date-picker",
          type: "date",
        },
      ],
    };
  },
  methods: {
    onSearch() {},
  },
};
</script>

显示代码

wocwin微信二维码

例子

   <ot-search :formOptions="formOptions" @onSearch="onSearch"></ot-search>

数据声明

   formOptions: [
        {
          label: '意见内容',
          prop: 'content',
          element: 'el-input'
        },
        {
          label: '类型',
          prop: 'type',
          element: 'el-select',
          options: [{
              label: '给点意见',
              value: '1'
            },
            {
              label: '售后问题',
              value: '2'
            }
          ]
        },
        
        {
          label: '提交时间',
          prop: 'timeRange',
          element: 'el-date-picker',
          type: 'date'
        }
      ],

回调

   onSearch(val) {
      console.log(val)
    },

---

参数说明

参数	类型	可选	说明
formOptions	Array	是	传入的参数

---

表单配置

     /**
     * 表单配置
     * 示例：
     * [{
     *   label: '用户名', // label文字
     *   prop: 'username', // 字段名
     *   element: 'el-input', // 指定elementui组件
     *   initValue: '阿黄', // 字段初始值
     *   placeholder: '请输入用户名', // elementui组件属性
     *   rules: [{ required: true, message: '必填项', trigger: 'blur' }], // elementui组件属性
     *   events: { // elementui组件方法
     *     input (val) {
     *       console.log(val)
     *     },
     *     ...... // 可添加任意elementui组件支持的方法
     *   }
     *   ...... // 可添加任意elementui组件支持的属性
     * }]
     */