表格头部搜索封装

表格头部搜索封装

引入tableHeader组件如下：

   

  computed: {
    //搜索条件
    searchCdt() {
      const self = this;
      return [
        {
          type: "select",
          placeholder: "请输入",
          label: "一级产品类型",
          prop: "productTypeOne",
          options: this.produceFirstList,
          events: {
            change: function (val) {
              if (self.$refs.tableHeader.$data.searchForm.productType) self.$refs.tableHeader.$data.searchForm.productType = '';
              if (val) return self.setProduceSecond(val);
              self.produceSecondList = [];
            }
          }
        },
        {
          type: "select",
          placeholder: "请输入",
          label: "二级产品类型",
          prop: "productType",
          options: this.produceSecondList
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "标准名称",
          prop: "name",
        },
        {
          type: "input",
          placeholder: "请输入",
          label: "标准号",
          prop: "code",
        },
        {
          type: "select",
          placeholder: "请选择",
          label: "标准状态",
          prop: "state",
          options: this.contractOptions,
        },
      ];
    },
  },