vue + el-table点击表头改变其当前样式_vue表头样式

废话不多说，先看效果：

网上找了一大圈没有符合的，只能自己看着搞：
直接贴代码：

 <el-table
        ref="table"
        :data="tableData"
        border
        stripe
        @sort-change="changeColumn"
      >
        <el-table-column label="排名" prop="userRank" align="center" fixed />
        <el-table-column label="员工" prop="userName" align="center" fixed />
        <el-table-column label="合计" prop="score" align="center">
          <template slot="header">
            <span @click="sortClick(0, 2 ,'0')">合计</span>
          </template>
        </el-table-column>
        <template>
          <el-table-column
            v-for="(item, index) in headData"
            :key="item.id"
            :label="item.name"
            align="center"
            :prop="String(item.id)"
          >
            <template slot="header">
              <span @click="sortClick(item.id, index ,'1')">{{ item.name }}</span>
            </template>
            <template slot-scope="scope">
              <span>
                <div
                  v-for="i in scope.row.items"
                  @click="detailAdopt(scope.row)"
                  style="cursor: pointer"
                  :key="i.id"
                >
                  <div v-if="i.parentCategoryId === item.id">
                    <div>
                      {{ i.score }}分<span v-show="numShow"
                        >({{ i.count }}个)</span
                      >
                    </div>
                  </div>
                </div>
              </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" prop="name" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              @click="seeProportion(scope.row)"
              type="text"
              size="small"
            >
              个人占比
            </el-button>
          </template>
        </el-table-column>
      </el-table>
<script>
	export default {
	  data() {
	    return {
	      tableData: [
	        // 表格数据...
	      ],
	      prevIndex: -1 // 用于保存上一次点击的表头索引
	    };
	  },
	  methods: {
	    sortClick(id, index , type) {
	      if(type === '1') {
	        index = index + 3;
	      } else {
	        index = index + 0;
	      }
	      // 通过ref获取表头元素
	      const tableHeader =
	        this.$refs.table.$el.getElementsByClassName("el-table__header")[0];
	      // 恢复上一次点击表头的字体颜色为默认
	      if (this.prevIndex !== -1) {
	        const prevHeader =
	          tableHeader.getElementsByTagName("th")[this.prevIndex];
	        prevHeader.style.color = ""; // 恢复默认颜色（空字符串）
	      }
	      // 修改当前点击表头的字体颜色
	      const targetHeader = tableHeader.getElementsByTagName("th")[index];
	      targetHeader.style.color = "#409eff"; // 修改为你想要的颜色
	      // 更新prevIndex为当前点击的表头索引
	      this.prevIndex = index;
	
	      this.form.parentCategoryId = id;
	      this.list();
	    },
	  }
	};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

这种写法经使用过程中发现问题，故修改为以下：

<el-table ref="table" v-loading="loading" :data="tableData" border stripe>
        <el-table-column label="排名" prop="userRank" align="center" fixed />
        <el-table-column label="员工" prop="userName" align="center" fixed />
        <el-table-column label="合计" prop="score" align="center" fixed>
          <template slot="header">
            <span
              @click="sortClick({ id: 0, name: '合计' })"
              :class="titClick ? 'fontColor' : ''"
              >合计</span
            >
          </template>
        </el-table-column>
        <template>
          <el-table-column
            v-for="item in headData"
            :key="item.id"
            :label="item.name"
            align="center"
            :prop="String(item.id)"
          >
            <template slot="header">
              <span @click="sortClick(item)">{{ item.name }}</span>
            </template>
            <template slot-scope="scope">
              <span>
                <div v-if="scope.row.items.length">
                  <div
                    v-for="i in scope.row.items"
                    style="cursor: pointer"
                    :key="i.id"
                  >
                    <div v-if="i.parentCategoryId === item.id">
                      <div @click="detailAdopt(i)">
                        {{ i.score }}分
                        <p v-show="numShow">({{ i.count }}个)</p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- <div v-else>0</div> -->
              </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" prop="name" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              @click="seeProportion(scope.row)"
              type="text"
              size="small"
              v-if="scope.row.score !== '0.00'"
            >
              个人占比
            </el-button>
          </template>
        </el-table-column>
      </el-table>
<script>
	export default {
	  data() {
	    return {
	      tableData: [
	        // 表格数据...
	      ],
	      prevIndex: -1 // 用于保存上一次点击的表头索引
	    };
	  },
	  methods: {
	        sortClick(item) {
		      const tableHeader =
		        this.$refs.table.$el.getElementsByClassName("el-table__header")[0];
		      if (this.prevIndex !== -1) {
		        const prevHeader =
		          tableHeader.getElementsByTagName("th")[this.prevIndex];
		        prevHeader.style.color = "";
		      }
		      const targetHeader = tableHeader.getElementsByTagName("th");
		      if (item.id === 0) {  //但是这个样式不生效，还不知道为啥
		        this.titClick = true;
		      } else {
		        this.titClick = false;
		        for (let i = 0; i < targetHeader.length; i++) {
		          if (targetHeader[i].innerText === item.name) { //这里做的是名称的判断
		            targetHeader[i].style.color = "#409EFF";
		            this.prevIndex = i;
		          }
		        }
		      }
		      this.form.parentCategoryId = item.id;
		      this.list();
		    },
	  }
	};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94