vue组件vxe-table的踩坑记录

关于大数据加载

相同点

loadData和reloadData都可以加载大数据。

不同点

reloadData会清空数据状态。显著的一条多选状态下 reserves 会失效，而 loadData 不会出现这样的情况

方法

this.$refs.xxxRef.loadData(arr)

多选表格

<vxe-table-column type="checkbox" width="60"></vxe-table-column>

两个方法

方法	参数
checkbox-change	{ records, reserves, indeterminates, checked, row, rowIndex, $rowIndex, column, columnIndex,$columnIndex, $event }
checkbox-all	{ records, reserves, indeterminates, checked, $event }

比较实用的参数

• records 当前选择的数组
• reserves 记录的上次选的是数组，需要配置 checkbox-config的 reserve 为true(需要指定row-id )。注意事项：操作完成后，需要清空选择的数组

大数据checkbox渲染

设置checkbox-config的checkField必须绑定选中行的已存在的属性。注意：绑定的属性会修改为布尔值。根据实际情况做排除

编辑表格

 <vxe-table
    border
    resizable
    show-overflow
    :data="tableData"
    :edit-config="{trigger: 'click', mode: 'cell'}">
    ....
</vxe-table>

需要用到的单元格

<vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text'}}"></vxe-table-column>

禁用编辑

设置 edit-config 的 activeMethod(主要参数 row， column）方法判断单元格是否禁用 activeMethod 方法 false为不可编辑，true为可编辑