针对element表格

小皮皮不皮

已于 2023-03-07 17:42:50 修改

阅读量197

点赞数

CC 4.0 BY-SA版权

分类专栏： vue的一些使用技巧文章标签： elementui 前端 javascript

于 2023-03-06 17:36:49 首次发布

本文链接：https://blog.youkuaiyun.com/fengxiaopeng74/article/details/129362349

vue的一些使用技巧专栏收录该内容

30 篇文章

订阅专栏

这段代码描述了一个Vue.js应用中的表格组件，当用户点击某个单元格时，会选中属于同一级别的所有包含`total`或`than`字样的单元格。表格数据包括地区（如全市、荷塘区等）和多日期的数据，每个日期有`total`和`than`两个子属性。`cellClick`事件处理函数用于处理单元格点击，改变选中单元格的背景色和文字颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不可点击序号，辖区，点击其他某个单元格，同属一级的几个单元格都要选中

 <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";

          }
        } 
      }
    },