直播app開發，核取方塊選中所在的行，右側按鈕禁掉

直播app開發，核取方塊選中所在的行，右側按鈕禁掉

<template>
<!-- 
   el-table中核取方塊，當核取方塊選中所在的行，name該行對應的操作按鈕，要禁掉（不可點選）
   單選採用的方法：當點選選中所在的行，row中會有isDisabled屬性
   全選： 因為selectAll 沒有row引數，所以給選中的item,新增一個isDisabled屬性
 -->
  <div>
    <el-table
      :data="submitList"
      v-model="check2"
      @select="select"
      @select-all="selectAll"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="name" label="檔名" width="200"></el-table-column>
      <el-table-column prop="" label="型別" width="200" align="center">
        <template scope="scope">
          <el-button :style="{'pointer-events': scope.row.isDisabled ? 'none': 'visiblePainted'}"
            @click="btn">按鈕</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      submitList: [{ name: "1111" }, { name: "2222" }, { name: "3333" }],
      check2: "",
    };
  },
  methods: {
    //  點選選中核取方塊，觸發的事件
    select(selection, row) {
      const selected = selection.length && selection.indexOf(row) !== -1;
      if (selected) {
      row.isDisabled = true // 使用點選後，所在的row上，有isDisabled屬性操作
    } else {
      row.isDisabled = false
    }
    },
    // 點選全選按鈕，操作按鈕禁用處理
    // 因為selectAll拿不到row，所以採用給選中的item,新增一個isDisabled屬性
  selectAll(selection) {
    if (selection.length > 0) {
      selection.forEach(select => {
        select.isDisabled = true
      })
    } else {
      this.tableData.forEach(select => {
        select.isDisabled = false
      })
    }
  },
    btn(){
      console.log('按鈕的點選事件')
    }
  },
};
</script>

以上就是 直播app開發，核取方塊選中所在的行，右側按鈕禁掉，更多內容歡迎關注之後的文章