一. 通过对表头的图标按钮点击, 然后操作当前列数据 , 如图:
el-select里的复选框,代码如下:
<el-table-column
v-for="(column,index) of bindTableColumns"
:key="'tab_'+index+column.id"
:prop="column.prop"
:label="column.label"
:align="column.align"
:width="column.width"
show-overflow-tooltip
scoped-slot
>
<template #header> // 具名插槽简写
<span>{{column.label}}</span>
<el-popover
placement="bottom"
width="100%"
trigger="click"
@after-enter="popoverChange(column.prop)"
>
<el-row style="margin-bottom:10px;">
<el-button type="primary" size="mini" class="el-icon-sort-up" @click="ascHandle(column.prop,'asc')">升序</el-button>
<el-button type="primary" size="mini" class="el-icon-sort-down" @click="descHandle(column.prop,'desc')">降序</el-button>
<el-button type="primary" size="mini" @click="queryContent(column.prop)">查询</el-button>
</el-row>
<el-divider content-position="left">内容筛选</el-divider>
<el-row>
<el-select
placeholder="请选择"
size="small"
v-model="checkedCols"
clearable
filterable
multiple
collapse-tags
@change="handleSelectChange"
>
<el-checkbox :indeterminate="isIndeterminatePop" style="margin-left:20px;" size="mini" v-model="checkAllPop" @change="handleAllPop">(全选)</el-checkbox>
<el-checkbox-group v-model="checkedCols">
<el-option
style="display:block;margin-left:10px;"
v-for="item in tableHeaderList"
:key="item.value"
:label="item.FIELD"
:value="item.ROW_ID"
>
<el-checkbox :label="item.FIELD">{{ item.FIELD }} ({{item.NUM}})</el-checkbox>
</el-option>
</el-checkbox-group>
</el-select>
</el-row>
<el-row style="margin: 20px 0 0 100px;">
<!-- <el-button type="primary" size="mini">取消</el-button> -->
</el-row>
<i class="el-icon-caret-bottom" v-if="column.type != 'show'" slot="reference" style="padding-left:5px;"></i>
</el-popover>
</template>
</el-table-column>
data() { return {
}}
methods里的逻辑:
/* -------------------& 表头功能操作 &---------------------- */
popoverChange(event) {
// console.log("event-##",event);
this.getNumAndGroup({field:event});
this.checkedCols = [];
},
// 全选操作
handleAllPop(val) {
let columnOptionKeys = [];
this.tableHeaderList.forEach(item => {
columnOptionKeys.push(item.FIELD);
});
this.checkedCols = val ? columnOptionKeys : [];
this.isIndeterminatePop = false;
},
// 下拉框事件
handleSelectChange(value) {
let checkedCount = value.length;
this.checkAllPop = checkedCount === this.tableHeaderList.length;
this.isIndeterminatePop = checkedCount > 0 && checkedCount < this.tableHeaderList.length;
},
// 升序操作
ascHandle(event,type) {
this.formInfo.sort = '';
this.formInfo.fieldName = event;
if (type == 'asc') {
this.querySummaryDataList(this.formInfo);
}
},
// 降序操作
descHandle(event,type) {
this.formInfo.sort = 'desc';
this.formInfo.fieldName = event;
if (type == 'desc') {
this.querySummaryDataList(this.formInfo);
}
},
// 搜索查询
queryContent(event) {
this.formInfo[event] = this.checkedCols.toString();
this.querySummaryDataList(this.formInfo);
},