vue2版本的vxe-table选择框默认选中

最新推荐文章于 2025-06-09 15:02:02 发布

原创最新推荐文章于 2025-06-09 15:02:02 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js

场景是要点击修改的时候，vxe-table表格的多选要默认全部选中

这里主要用到的属性是xue-table提供的checkbox-config属性

template中的vxe-table中的代码

 <vxe-table border ref="orderTable" auto-resize height="290" :data="form.bring" :checkbox-config=checkBox >
         <vxe-table-column type="checkbox" width="50" v-if="!isEdit"> </vxe-table-column>
         <vxe-table-column title="序号" type="seq" field="seq" width="50" align="center"></vxe-table-column>
         <vxe-table-column title="客户" field="cust_name" width="150"></vxe-table-column>
         <vxe-table-column title="数量" field="sumqty" width="150"></vxe-table-column>
         ......
 </vxe-table>

data中的数据：

export default{
  data(){
    return{
      form: {},
      checkBox:{
         checkAll: false, // 是否显示全选按钮
         //-------------下面的属性暂时没用到
         
         reserve: true, // 是否保留选中状态
         checkStrictly: false, // 是否严格的单选
         checkAll: false, // 是否显示全选按钮
         checkRowKeys: [], // 默认勾选的行数据的 RowKey
         halfCheckedRowKeys: [], // 默认半选的行数据的 RowKey
         showHeader: true, // 是否显示表头的复选框
         showFooter: false // 是否显示表尾的合计行的复选框
      },
    }
  }
}

点击修改按钮触发的事件

edit(){
   this.checkBox.checkAll = true;
   //这里需要重新加载表格，否则可能无法正常选中
   this.$refs.orderTable.reloadData(this.form.bring)
}

记录一下