vue+el-table點擊表頭實現(xiàn)改變其當前樣式

更新時間：2024年08月06日 09:23:23 作者：昨夜太平長安888

這篇文章主要介紹了vue+el-table點擊表頭實現(xiàn)改變其當前樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue el-table點擊表頭改變其當前樣式

廢話不多說，先看效果

網上找了一大圈沒有符合的，只能自己看著搞：

直接貼代碼

 <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: [
	        // 表格數(shù)據(jù)...
	      ],
	      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>

這種寫法經使用過程中發(fā)現(xiàn)問題

故修改為以下：

<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: [
	        // 表格數(shù)據(jù)...
	      ],
	      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>