vxe-table点击分页依旧保存复选框选项以及复选框按条件禁用事件

• :row–config=“{ isHover: true ,keyField:‘id’}”， keyField:‘id’–>自定义行数据唯一主键的字段名（默认自动生成）

  复选框点击事件，根据条件禁用复选框 :checkbox–config=“checkBoxConfig”

 <vxe-table
          border
          align="center"
          size="mini"
          show-header-overflow
          show-overflow
          :row-config="{ isHover: true ,keyField:'id'}"
          class="mytable-scrollbar"
          max-height="450"
          :checkbox-config="checkBoxConfig"
        >
        </vxe-table>

//点击事件,获取到所有所选数据
const xTable=ref(null)
const saveClick=()=>{
  const $table = xTable.value
   // getCheckboxRecords 获取当前页选中的数据
  // getCheckboxReserveRecords 获取已保留选中的行数据
  //通过_.concat lodash合并两个数组
  const selectRecords 
  =_.concat($table.getCheckboxRecords(),$table.getCheckboxReserveRecords())
}

// 表格checkbox根据条件禁用
const checkBoxConfig = {
  checkMethod: ({ row }) => {
    return !row.disable
  },
  //开启保留翻页选中
  reserve:true
}

代码007普通

打赏 收藏 海报 链接