vue+element el-table有关Checkbox的一些功能

  在做项目的时候会碰到一些表格操作的问题其中我归整了一下有关于多选功能的一些记录

   一:默认选中其中一行

<el-table
    class="editTable"
    :data="list && list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    border
    ref="multipleTable"
    @selection-change="selectionChange"
    v-loading="loading">
</el-table>
this.$refs.multipleTable.toggleRowSelection(this.$refs.multipleTable.data[0],true);

二:触发清空所有选中状态

this.$refs.multipleTable.clearSelection();

三:分页选中记录所有选中状态携带记忆功能(表格数据过多需要分页)

:row-key="(row) => row.id"  和  多选 column 添加记忆功能 :reserve-selection="true"
<el-table
    class="editTable"
    :data="list && list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    border
    ref="multipleTable"
    :row-key="(row) => row.id"
    @selection-change="selectionChange"
    v-loading="loading">

   <el-table-column
      :type="type"
      :reserve-selection="true">
    </el-table-column>

</el-table>

-----有新的随时更新 2021/7/9

 

上一篇:JSX的条件渲染


下一篇:Element-UI 中 loading 的使用