ElementUI中展開行table設置表頭顏色(添加icon)

圖例:

步驟:

1.添加屬性

2.在data中添加: expands: [ ]

3.創建方法函數

  methods: {
    setLabel() {
      let _this = this;
      this.$nextTick(() => {
        let cellDiv = document.getElementsByClassName("cell use")[0];
        cellDiv.setAttribute("style", "cursor:pointer");
        let node = document.createElement("i");
        node.setAttribute("class", "el-icon el-icon-arrow-right");
        node.setAttribute("id", "ICON");
        node.setAttribute("isExpand", "no"); //设置属性is-expand的值
        node.onclick = function() {
          _this.cellDivClick.call(_this, node);
        };
        cellDiv.appendChild(node);
      });
    },
    cellDivClick(ele) {
      console.log(ele);
      let expandState = ele.getAttribute("isExpand"); //获取属性is-expand的值
      //关闭的情况点击
      if (expandState === "no") {
        //展开
        const $table = this.$refs.topicTable;
        $table.data.map(item => {
          $table.toggleRowExpansion(item, true);
        });
        ele.setAttribute("class", "el-icon el-icon-arrow-down");
        ele.setAttribute("isExpand", "yes");
      } else if (expandState === "yes") {
        //展开的情况点击关闭
        const $table = this.$refs.topicTable;
        $table.data.map(item => {
          $table.toggleRowExpansion(item, false);
        });
        ele.setAttribute("class", "el-icon el-icon-arrow-right");
        ele.setAttribute("isExpand", "no");
      }
    },
   }

4.mounted中運行函數

 async mounted() {
    this.setLabel();
  },