Dj_coms NPM | npm.io

tablet搜索设置

step1 table标签添加 :headSearchMethod="getSearch"

    <Table
      :columns="columsList"
      ref="roleTable"
      selectType="checkbox"
      :cacheSelection="true"
      :data="tableData"
      keyId="waybillId"
      :pageSize="50"
      :headSearchMethod="getSearch"  # 启用列头搜索
      :showSummary="showSummary"
    >
    </Table>

    //处理列头搜索条件
    getHeadSearch (searchData,page){
      let p = Object.assign(this.paging,{condition:[]})
      return p;
    }

step2 table列头添加搜索配置。需要搜索列头配置，新增attr属性,attr属性内为element-ui 上的组件属性,可参照其文档填写。中划线在attr 中为驼峰显示. 筛选类型为select、daterange、numberrange、cascader、input、autocomplete 其中 select 使用labelKey、valueKey进行字段显示转换、autocomplete使用valueKey进行字段转换示例如下：

#列头原来属性
{
  label: "客户名称",
  prop: "partnerName",
  require: true,
  width: 200
}

// newList 列头数组

//如下例子
//select
newList[0] = {
  label: "客户名称",
  prop: "partnerName",
  require: true,
  width: 200,
  type:'select',
  attr:{
    options:[{label:'你好',value:'1'},{label:'不知道',value:'2'}],
    multiple:false,
    clearable:true,
  }
}
// daterange
newList[4] = {
  label: "重量(kg)",
  prop: "totalTargetWeight",
  require: true,
  width: 200,
  type:'daterange',
  attr:{
    rangeSeparator:"-",
    startPlaceholder:"开始日期",
    endPlaceholder:"结束日期"
  }
}
// datetimerange
newList[5] = {
  label: "发货方名称",
  prop: "sdName",
  require: true,
  width: 200,
  type:'datetimerange',
  attr:{
    rangeSeparator:"-",
    startPlaceholder:"开始日期",
    endPlaceholder:"结束日期"
  }
}
// numberrange
newList[10] = {
  label: "件数1111",
  prop: "totalAmount",
  require: true,
  width: 150,
  type:'numberrange',
  attr:{
    rangeSeparator:"-",
  }
}
// cascader
newList[3] = {
  label: "发货区域",
  prop: "sdAddressArea",
  require: true,
  width: 150,
  type:'cascader',
  attr:{
    options:[{label:'你好',value:'1'},{label:'不知道',value:'2'}],
    props:{multiple:true}
  }
}
// autocomplete
newList[7] = {
  label: "客户单号",
  prop: "clientCode",
  require: true,
  width: 150,
  type:'autocomplete',
  attr:{
    fetchSuggestions:this.suggestions,
    select:this.suggestionSelect
  }
}