一 . 前端html部分 用了el的多选table 和 树形table 融合
<el-table
ref="multipleTable"
:data="filterPageTableData"
tooltip-effect="dark"
style="width: 100%"
row-key="id"
:default-expand-all="isExpand"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@selection-change="handleSelectionChange"
@select-all="selectAll"
@expand-change="gitpullChange"
@select="selectRow"
>
<el-table-column type="selection" width="58"></el-table-column>
<el-table-column label="日期" width="180">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
</div>
二 . 数据 部分 是树形table的数据格式
data() {
return {
isExpand: false,
checked: true,
filterPageTableData: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
children: [
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
}
]
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
children: [
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
id: 33,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
}
]
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
],
multipleSelection: [],
checkedContent: "",
totalChildren: "",
selectionCheck: []
};
},
三 . 在点击复选框部分，我查找了好多文档但是别人写的 我看不太懂，所以我就自己写了一个直接操作 DOM 去渲染表头的选中状态，直接去掉不确定的状态，里面还有一些瑕疵，如果有大佬看到，希望可以指导指导我
mounted() {
this.gitNum();
},
methods: {
// 设置表头全选
selectAll(selection) {
// 全选
this.$refs.multipleTable.clearSelection();
this.clearChild();
if (selection.length > 0 && selection[0] == this.filterPageTableData[0]) {
this.filterPageTableData.map(val => {
this.$refs.multipleTable.toggleRowSelection(val);
val.checked = true;
if (val.children != undefined && val.children.length > 0) {
if (val.expandedRows == true) {
for (let i = 0; i <= val.children.length - 1; i++) {
this.$refs.multipleTable.toggleRowSelection(val.children[i]);
val.children[i].checked = true;
}
} else if (
val.expandedRows == false ||
val.expandedRows == undefined
) {
}
}
});
}
if (this.multipleSelection.length == 0) {
this.checkedContent.style.backgroundColor = "transparent";
this.checkedContent.style.borderColor = "#ccc";
} else {
this.checkedContent.style.backgroundColor = "#409EFF";
this.checkedContent.style.borderColor = "#409EFF";
}
},
// 当点击每一项时
selectRow(selection, row) {
if (row.checked == undefined || row.checked == false) {
row.checked = true;
} else {
row.checked = false;
}
var total = this.filterPageTableData.length; //循环点击下拉时所有项
var num = selection.length;
this.filterPageTableData.map(val => {
if (val.children && val.expandedRows == true) {
total = total + val.children.length;
}
if (val.children && val.expandedRows == false) {
for (var i = 0; i < val.children.length; i++) {
if ((val.children[i].checked == true)) {
num = num - 1;
} else {
}
}
}
});
if (total == num && this.multipleSelection.length != 0) {
this.checkedContent.style.backgroundColor = "#409EFF";
this.checkedContent.style.borderColor = "#409EFF";
} else {
this.checkedContent.style.backgroundColor = "transparent";
this.checkedContent.style.borderColor = "#ccc";
}
this.totalChildren = total;
this.selectionCheck = selection;
},
// 判断下拉图标
gitpullChange(row) {
// 判断当前图标是不是展开状态是看expanded的值是false还是true,
this.checkedContent = this.$refs.multipleTable.$el.childNodes[1].children[0].children[1].children[0].children[0].children[0].children[0].children[0].children[0];
if (row.expandedRows == false || row.expandedRows == undefined) {
row.expandedRows = true; //展开下拉
var num = 0;
var nowTotal;
this.filterPageTableData.map(val => {
nowTotal = this.filterPageTableData.length;
if (
val.children != undefined &&
val.children.length > 0 &&
val.expandedRows == true
) {
nowTotal = nowTotal + val.children.length;
for (var i = 0; i < val.children.length; i++) {
if (
val.children[i].checked == undefined ||
val.children[i].checked == false
) {
num = num + 1;
} else {
}
}
}
});
if (num > 0) {
this.checkedContent.style.backgroundColor = "transparent";
this.checkedContent.style.borderColor = "#ccc";
} else {
this.checkedContent.style.backgroundColor = "#409EFF";
this.checkedContent.style.borderColor = "#409EFF";
}
} else if (row.expandedRows == true) {
row.expandedRows = false; //关闭下拉
var num1 = 0;
this.filterPageTableData.map(val => {
if (val.children && val.expandedRows == true) {
for (var j = 0; j < val.children.length; j++) {
if (
val.children[j].checked == undefined ||
val.children[j].checked == false
) {
num1 = num1 + 1;
} else {
}
}
}
});
if (num1 > 0 || this.multipleSelection.length == 0) {
this.checkedContent.style.backgroundColor = "transparent";
this.checkedContent.style.borderColor = "#ccc";
} else {
this.checkedContent.style.backgroundColor = "#409EFF";
this.checkedContent.style.borderColor = "#409EFF";
}
}
},
// 获取所有主从库的数量
gitNum() {
this.filterPageTableData.map(val => {
if (val.children != undefined && val.children.length > 0) {
for (var i = 0; i < val.children.length; i++) {
this.gitMysqlNum.push(val.children[i]);
}
}
this.gitMysqlNum.push(val);
});
},
// 清空所有子元素的选中状态
clearChild() {
this.filterPageTableData.map(val => {
val.checked = false;
if (val.children) {
for (var i = 0; i < val.children.length; i++) {
val.children[i].checked = false;
}
}
});
},
// 当选择项发生变化时 调用
handleSelectionChange(val) {
this.multipleSelection = val;
},
}
};
四 .操作style 样式 去掉中间的选中状态
<style>
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: transparent !important;
border-color:
}
</style>
title: 前端 elementui
date: 2019-04-24 15:40:24
type: tags
