dj_coms
v1.4.29
Published
+ step1 table标签添加 :headSearchMethod="getSearch" ``` <Table :columns="columsList" ref="roleTable" selectType="checkbox" :cacheSelection="true" :data="tableData" keyId="waybillId" :pageSize="50"
Downloads
157
Readme
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
}
}
tablet 尾部合计
参照element-ui,只需实现 :showSummary="showSummary",showSummary实现参照element-ui实现
table 滚动条底部固定
在table 属性上设置 :hasComputedHeight="true" true 自动计算、滚动条底部固定,false 不固定