快捷導(dǎo)航

element-ui在table中如何禁用其中幾行

更新時(shí)間：2023年10月18日 08:44:00 作者：怕是個(gè)神仙啊

這篇文章主要介紹了element-ui在table中如何禁用其中幾行問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

element-ui在table中禁用其中幾行

element-ui官網(wǎng)上提供了selectable屬性

<el-table :data="tableData">
      <el-table-column prop="name" label="姓名" :selectable="checkSelectable">
      </el-table-column>
</el-table>

checkSelectable(row) {
    if(row.name === '王小虎'){
        return false//禁用
    }else{
    return true//不禁用
    }
}

element-ui中使用table表格相關(guān)問題

1.hover某一行時(shí)修改背景顏色

可引入固定代碼

.el-table--enable-row-hover {
  .el-table__body tr:hover > td {
    background: #E6FFF7;//這里寫你想切換的顏色
  }
}`

2. 固定表頭

當(dāng)你的表格某一行需要hover或者active增加一定的樣式或效果時(shí)，你會(huì)發(fā)現(xiàn)樣式效果加上后，表頭就算是固定寬度，但是還是會(huì)出現(xiàn)不斷閃爍，這時(shí)候可在 總css文件里面 加上這段固定代碼去控制

//固定表頭
 .el-table th.gutter{
  display: table-cell!important;
}

.el-table colgroup.gutter{
  display: table-cell!important;
}

3. 對(duì)于有多選框的表格

需要勾選某行，就修改其背景顏色

如圖：

//html中
  <el-table
    :data="tableData"
     style="width: 100%"
     @selection-change="handleSelectionChange"http://獲取點(diǎn)擊的那一行的數(shù)據(jù)
     :row-style="rowClass"http://設(shè)置單行樣式
   >
//聲明兩個(gè)數(shù)組用來存儲(chǔ)取出來的數(shù)據(jù)
 data() {
  return {
      selectRow: [],
      selectData: [],
     }
 }
//mothods中
    //click每一行函數(shù)---獲取數(shù)據(jù)
    handleSelectionChange(data) {
      this.selectData = data;
    }, 
    // 修改樣式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { "background-color": "#E6FFF7" };
      }
    },
 //watch中監(jiān)聽點(diǎn)擊行數(shù)據(jù)變化
  watch: {
    selectData(data) {
      this.selectRow = [];
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    },
  },

4. hover某一行

動(dòng)態(tài)修改某一行的文本信息

//html中
<el-table
        :data="tableData"
        style="width: 100%"
        @cell-mouse-enter="handleMouseEnter"http://鼠標(biāo)移入事件
        @cell-mouse-leave="handleMouseLeave"http://鼠標(biāo)移出事件
      >
        <el-table-column label="賬號(hào)狀態(tài)" width="300" :key="itemkey">//這里綁定key值是為了避免改一行的值引發(fā)了修改所有行的值
           <template slot-scope="scope">
          <div v-if="enable==scope.row.id">//用唯一的id修改顯示和隱藏
            <span class="edit">編輯</span>
            <span class="disable">禁用</span>
            <span class="delete">刪除</span>
          </div>
          <div v-else>啟用</div>
           </template>
        </el-table-column>

  //mothods中hover單元格函數(shù)
  handleMouseEnter: function (row, event) {
    this.itemkey = Math.random();//這里的key值給隨機(jī)數(shù)
    this.showFunction = row.id;//這里綁定唯一的id
  },
  handleMouseLeave: function (row, event) {
    this.itemkey = Math.random();
    this.showFunction = 0;
  },