效果图
template内容
<el-table ref="table" :data="tableDataList" tooltip-effect="dark" :style="{ width: '98%', margin: '0 auto' }"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column v-for="(item, index) in tableDataHeader" :key="index" :label="item">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="address" show-overflow-tooltip fixed="right" width="55">
<template slot="header">
<el-popover popper-class="popper_a" placement="top" width="80" trigger="hover" content="列表设置">
<i class="el-icon-setting" slot="reference" ref="buttonRef" @click.stop="onclick" />
</el-popover>
</template>
</el-table-column>
</el-table>
<div class="listSettings" v-if="treeShow" ref="divRef">
<el-input placeholder="输入关键字进行过滤" v-model="filterText" suffix-icon="el-input__icon el-icon-search">
</el-input>
<div class="tree-container">
<el-tree :data="treeData" show-checkbox :default-checked-keys="checkedKeys" default-expand-all node-key="id"
:filter-node-method="filterNode" ref="tree" :check-strictly="true" highlight-current
:props="defaultProps" :check-on-click-node="true" @check="handleCheck">
</el-tree>
</div>
<div class="tree-foot">
<el-checkbox v-model="treeSelectAll" @change="handleSelectAll">全选</el-checkbox>
<el-link type="primary" @click="treeClick">恢复默认</el-link>
</div>
</div>
data(){
return {
tableDataList: [],
tableDataHeader: [],
treeShow: false,
filterText: '',
treeData: [
{
id: 1,
label: '开票点',
},
{
id: 2,
label: '开票类型',
disabled: true,
},
{
id: 3,
label: '发票种类',
},
{
id: 4,
label: '发票请求流水号',
disabled: true,
},
{
id: 5,
label: '购买方名称',
},
{
id: 6,
label: '购买方地址申话',
},
{
id: 7,
label: '购买方纳税人识别号',
},
{
id: 8,
label: '销售方名称',
},
{
id: 9,
label: '销售方地址电话',
},
{
id: 10,
label: '制单日期',
disabled: true,
},
{
id: 11,
label: '金额',
},
{
id: 12,
label: '税额',
},
{
id: 13,
label: '价税合计',
disabled: true,
},
{
id: 14,
label: '备注',
},
{
id: 15,
label: '特定业务',
},
{
id: 16,
label: '项目名称',
},
{
id: 17,
label: '自定义备注',
},
{
id: 18,
label: '状态',
disabled: true,
},
{
id: 19,
label: '来源单据号',
},
{
id: 20,
label: '拆分前发票请求流水号',
},
{
id: 21,
label: '开票人',
},
{
id: 22,
label: '发票申请来源',
},
],
checkedKeys: [2, 4, 5, 10, 11, 12, 13, 18],
defaultProps: {
children: 'children',
label: 'label'
},
treeSelectAll: false,//全选
}
},
watch: {
filterText(val) {
this.$refs.tree.filter(val);
},
},
created() {
this.$nextTick(() => {
this.tableDataHeader = this.treeData.filter(item => this.checkedKeys.includes(item.id)).map(item => item.label);
console.log(this.tableDataHeader, 'tableDataHeader');
});
},
methods:{
handleOutsideClick(event) { //最外的盒子 点击空白处关闭tree
const divElement = this.$refs.divRef;
console.log(divElement && !divElement.contains(event.target));
if (divElement && !divElement.contains(event.target)) {
if (this.treeShow == true) {
this.treeShow = false
}
}
},
handleCheck(data, checkedData) {
this.tableDataHeader = this.treeData.filter(item => checkedData.checkedKeys.includes(item.id)).map(item => item.label);
},
treeClick() {
this.treeSelectAll = false
this.$refs.tree.setCheckedKeys([2, 4, 5, 10, 11, 12, 13, 18]);
this.checkedKeys = [2, 4, 5, 10, 11, 12, 13, 18]
this.tableDataHeader = this.treeData.filter(item => this.checkedKeys.includes(item.id)).map(item => item.label);
},
handleSelectAll(value) {
if (value) {
// 全选
this.checkedKeys = this.getAllNodeKeys();
} else {
// 取消全选
this.$refs.tree.setCheckedKeys([2, 4, 5, 10, 11, 12, 13, 18]);
this.checkedKeys = [2, 4, 5, 10, 11, 12, 13, 18]
this.tableDataHeader = this.treeData.filter(item => this.checkedKeys.includes(item.id)).map(item => item.label);
}
},
getAllNodeKeys() {
// 获取所有节点的 key 值
const keys = [];
const label = [];
this.traverseTree(this.treeData, node => {
keys.push(node.id);
label.push(node.label);
});
this.tableDataHeader = label
console.log(this.tableDataHeader, 'this.tableDataHeader');
return keys;
},
traverseTree(nodes, callback) {
for (const node of nodes) {
callback(node);
if (node.children && node.children.length > 0) {
this.traverseTree(node.children, callback);
}
}
},
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
onclick() {
this.treeShow = true
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
}