不可点击序号,辖区,点击其他某个单元格,同属一级的几个单元格都要选中
<el-table
:data="baseDataList"
@cell-click="cellClick"
:cell-class-name="cellClassName"
:key="resetTableHeader"
></el-table>
baseDataList: [
{
districtName: "全市",
districtId: "430200",
"2022-12-31": 0, // 类似这种属性是动态的不确定的
"2022-12-31total": "0 / 0",
"2022-12-31than": "0 / 0",
"2023-01-01": 0,
"2023-01-01total": "0 / 0",
"2023-01-01than": "0 / 0",
"2023-01-02": 0,
"2023-01-02total": "0 / 0",
"2023-01-02than": "0 / 0",
"2023-01-03": 0,
"2023-01-03total": "0 / 0",
"2023-01-03than": "0 / 0",
"2023-01-04": 0,
"2023-01-04total": "0 / 0",
"2023-01-04than": "0 / 0",
"2023-01-05": 0,
"2023-01-05total": "113594 / 76549",
"2023-01-05than": "0 / 0",
"2023-01-06": 0,
"2023-01-06total": "0 / 0",
"2023-01-06than": "0 / 0",
},
{
districtName: "荷塘区",
districtId: "430202",
"2022-12-31": 0,
"2022-12-31total": "0 / 0",
"2022-12-31than": "0 / 0",
"2023-01-01": 0,
"2023-01-01total": "0 / 0",
"2023-01-01than": "0 / 0",
"2023-01-02": 0,
"2023-01-02total": "0 / 0",
"2023-01-02than": "0 / 0",
"2023-01-03": 0,
"2023-01-03total": "0 / 0",
"2023-01-03than": "0 / 0",
"2023-01-04": 0,
"2023-01-04total": "0 / 0",
"2023-01-04than": "0 / 0",
"2023-01-05": 0,
"2023-01-05total": "17363 / 12863",
"2023-01-05than": "0 / 0",
"2023-01-06": 0,
"2023-01-06total": "0 / 0",
"2023-01-06than": "0 / 0",
},
{
districtName: "芦淞区",
districtId: "430203",
"2022-12-31": 0,
"2022-12-31total": "0 / 0",
"2022-12-31than": "0 / 0",
"2023-01-01": 0,
"2023-01-01total": "0 / 0",
"2023-01-01than": "0 / 0",
"2023-01-02": 0,
"2023-01-02total": "0 / 0",
"2023-01-02than": "0 / 0",
"2023-01-03": 0,
"2023-01-03total": "0 / 0",
"2023-01-03than": "0 / 0",
"2023-01-04": 0,
"2023-01-04total": "0 / 0",
"2023-01-04than": "0 / 0",
"2023-01-05": 0,
"2023-01-05total": "20935 / 13942",
"2023-01-05than": "0 / 0",
"2023-01-06": 0,
"2023-01-06total": "0 / 0",
"2023-01-06than": "0 / 0",
},
{
districtName: "石峰区",
districtId: "430204",
"2022-12-31": 0,
"2022-12-31total": "0 / 0",
"2022-12-31than": "0 / 0",
"2023-01-01": 0,
"2023-01-01total": "0 / 0",
"2023-01-01than": "0 / 0",
"2023-01-02": 0,
"2023-01-02total": "0 / 0",
"2023-01-02than": "0 / 0",
"2023-01-03": 0,
"2023-01-03total": "0 / 0",
"2023-01-03than": "0 / 0",
"2023-01-04": 0,
"2023-01-04total": "0 / 0",
"2023-01-04than": "0 / 0",
"2023-01-05": 0,
"2023-01-05total": "13912 / 8654",
"2023-01-05than": "0 / 0",
"2023-01-06": 0,
"2023-01-06total": "0 / 0",
"2023-01-06than": "0 / 0",
},
{
districtName: "天元区",
districtId: "430211",
"2022-12-31": 0,
"2022-12-31total": "0 / 0",
"2022-12-31than": "0 / 0",
"2023-01-01": 0,
"2023-01-01total": "0 / 0",
"2023-01-01than": "0 / 0",
"2023-01-02": 0,
"2023-01-02total": "0 / 0",
"2023-01-02than": "0 / 0",
"2023-01-03": 0,
"2023-01-03total": "0 / 0",
"2023-01-03than": "0 / 0",
"2023-01-04": 0,
"2023-01-04total": "0 / 0",
"2023-01-04than": "0 / 0",
"2023-01-05": 0,
"2023-01-05total": "43485 / 34376",
"2023-01-05than": "0 / 0",
"2023-01-06": 0,
"2023-01-06total": "0 / 0",
"2023-01-06than": "0 / 0",
},
{
districtName: "云龙大队",
districtId: "430218",
"2022-12-31": 0,
"2022-12-31total": "0 / 0",
"2022-12-31than": "0 / 0",
"2023-01-01": 0,
"2023-01-01total": "0 / 0",
"2023-01-01than": "0 / 0",
"2023-01-02": 0,
"2023-01-02total": "0 / 0",
"2023-01-02than": "0 / 0",
"2023-01-03": 0,
"2023-01-03total": "0 / 0",
"2023-01-03than": "0 / 0",
"2023-01-04": 0,
"2023-01-04total": "0 / 0",
"2023-01-04than": "0 / 0",
"2023-01-05": 0,
"2023-01-05total": "5914 / 2434",
"2023-01-05than": "0 / 0",
"2023-01-06": 0,
"2023-01-06total": "0 / 0",
"2023-01-06than": "0 / 0",
},
],
tableHeader: [
{
date: "2022-12-31",
dateDetail: "周六-元旦-休", // 这个表头下面还分两个totalStr / thanStr
prop: "2022-12-31",
totalStr: "活跃车/总量",
thanStr: "同比/同比总量",
},
{
date: "2023-01-01",
dateDetail: "周日-元旦-休",
prop: "2023-01-01",
totalStr: "活跃车/总量",
thanStr: "同比/同比总量",
},
{
date: "2023-01-02",
dateDetail: "周一-元旦-休",
prop: "2023-01-02",
totalStr: "活跃车/总量",
thanStr: "同比/同比总量",
},
{
date: "2023-01-03",
dateDetail: "周二-非节假日-班",
prop: "2023-01-03",
totalStr: "活跃车/总量",
thanStr: "同比/同比总量",
},
{
date: "2023-01-04",
dateDetail: "周三-非节假日-班",
prop: "2023-01-04",
totalStr: "活跃车/总量",
thanStr: "同比/同比总量",
},
{
date: "2023-01-05",
dateDetail: "周四-非节假日-班",
prop: "2023-01-05",
totalStr: "活跃车/总量",
thanStr: "同比/同比总量",
},
{
date: "2023-01-06",
dateDetail: "周五-非节假日-班",
prop: "2023-01-06",
totalStr: "活跃车/总量",
thanStr: "同比/同比总量",
},
],
cellClassName({ row, column, rowIndex, columnIndex }) {
// 给需要选中的表格类名
let arr = Object.assign({}, row);
arr = Object.keys(arr);
let makeArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].indexOf("total") != -1 || arr[i].indexOf("than") != -1) {
makeArr.push(arr[i]);
}
}
if (columnIndex > 1) {
return makeArr[columnIndex - 2];
}
},
// 某个表格点击事件
cellClick(row, column, cell, event) {
// 获取点击单元格得父级tr
let trHtml = cell.parentNode;
// 获取点击单元格tr行得下标
let trIndex = [].indexOf.call(
trHtml.parentNode.querySelectorAll(trHtml.tagName),
trHtml
);
// 获取单元格对应的表头名字
let className = column.property;
// 查找该单元格的类名和相对应的单元格类名使用
let total = "total";
let than = "than";
if (column.label != "序号" && column.label != "辖区") {
// 先清除所有选中
let tableBox = document.getElementsByClassName("tableWrapper")[0];
let tdName = tableBox.getElementsByTagName("td");
for (let i = 0; i < tdName.length; i++) {
tdName[i].style = "background-color: transparent; color: auto";
}
// 当前点击选中
cell.style =
"color:" +
this.tableColor +
"!important; background-color:" +
this.tableBgColor +
"!important";
let tableBody = document.getElementsByClassName(
"el-table__body-wrapper"
)[0];
let trName = tableBody.getElementsByTagName("tr")[trIndex];
// 找到类名之后找到对应的单元格类名
if (className.indexOf(total) != -1) {
className = className.replace(total, "");
className = className + than;
let active = trName.getElementsByClassName(className)[0];
active.style =
"color:" +
this.tableColor +
"!important; background-color:" +
this.tableBgColor +
"!important";
} else {
if (className.indexOf(than) != -1) {
className = className.replace(than, "");
className = className + total;
let active = trName.getElementsByClassName(className)[0];
active.style =
"color:" +
this.tableColor +
"!important; background-color:" +
this.tableBgColor +
"!important";
}
}
}
},