Vue el-table表格第一列序號與復選框hover切換方式

更新時間：2024年07月24日 10:37:08 作者：李澤舉

這篇文章主要介紹了Vue el-table表格第一列序號與復選框hover切換方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

項目中用vue element el-table

表格的第一列為鼠標經(jīng)過時切換顯示序號與復選框

不影響當前行的點擊事件 , 如跳轉(zhuǎn)詳情等操作

老規(guī)矩,先上效果圖

HTML

<el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      border
      stripe
      @cell-mouse-enter="cellEnter"
      @cell-mouse-leave="cellLeave"
      @selection-change="handleSelectionChange"
      @row-click="toDeatils"
    >
      <el-table-column type="selection" width="50" align="left">
        <template #default="{ row, $index }">
          <div
            v-if="columnCheckedId == row.id || checkedList[$index]"
            @click.stop
          >
            <el-checkbox
              v-model="checkedList[$index]"
              @change="cellCheckbox(row, $index)"
            ></el-checkbox>
          </div>
          <span v-else>{{ $index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 如有操作列 ↓-->
    </el-table>

JS

data() {
    return {
      columnCheckedId: '',
      tableData: [], //table數(shù)據(jù)
      multipleSelection: [], //table多選數(shù)據(jù)
      checkedList: [], //table多選選中數(shù)據(jù)
    }
  },
  methods:{
	  	handleSelectionChange(val) {
	      this.multipleSelection = val
	      if (this.multipleSelection.length == this.tableData.length) {
	        this.multipleSelection.forEach((item, index) => {
	          this.checkedList[index] = true
	        })
	      }
	      if (this.multipleSelection.length == 0) {
	        this.checkedList = []
	      }
	      this.$emit('selectList', this.multipleSelection)
	  	},
	    //鼠標移入表格當前行
	    cellEnter(row, column, cell, event) {
	      this.columnCheckedId = row.id
	    },
	    // 鼠標移出表格當前行
	    cellLeave(row, column, cell, event) {
	      this.columnCheckedId = ''
	    },
	    // 選中與否塞數(shù)據(jù)
	    cellCheckbox(row, index) {
	      if (this.checkedList[index]) {
	        this.$refs.table.toggleRowSelection(row, true)
	      } else {
	        this.$refs.table.toggleRowSelection(row, false)
	      }
	    },
  }