Ant Table 復選框禁用 全選時禁用復選框被選中問題


<template>
  <a-table
    :row-selection="{
      getCheckboxProps: getCheckboxProps,
    }"
    rowKey="id"
    :columns="columns"
    :data-source="data"
  >
  </a-table>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      columns: [],
    };
  },
  methods: {
    // 復選框禁用
    getCheckboxProps(record) {
      // 加載表格的時候直接就可以拿到table所有的data數據 record是獲取到表格data每一行的數據
      return {
        props: {
          // name里面去寫你要禁用表格(那一列的狀態值來進行禁用)  比方說我表格columns數據里面有個status( dataIndex: 'status')
          name: record.status,
          // disabled里面寫你要根據后台傳來的值進行禁用  比方說我們的需求是(后台傳來三個值分別是{1,2,3})當status 的值是1和2時禁用當前表格的復選框
          disabled: record.status === "1" || record.status === "2",
          // 如果代碼不生效 那么就是你rowKey的問題 沒有對應的唯一值 (如果不知道怎么解決 麻煩翻翻我博客園里面有解決方法)
        },
      };
    },
  },
};
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM