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

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

2024-08-23 20:08:21 前端知识 前端哥 403 11 我要收藏
  • :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
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/16673.html
标签
评论
发布的文章

HTML5 基本框架

2024-09-01 23:09:50

HTML5取消边框的方法

2024-09-01 23:09:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!