Element:点击分页时保存勾选框

Mia_forever

于 2019-04-23 19:19:01 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue element 分页勾选

本文链接：https://blog.youkuaiyun.com/Mia_forever/article/details/89478976

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Element UI的表格组件中保留选中行数据，并通过clearSelection方法清除选择，实现批量操作如下载保存等功能。代码示例展示了如何使用reserve-selection属性和getRowKeys方法获取行唯一标识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分：

<el-table

ref="CatalogTable"

v-loading="Loading"

border

:size="elTable"

:highlight-current-row="true"

:data="DialogCatalogData"

height="a"

:row-key="getRowKeys"

@selection-change="handleSelectionChange"

>

<el-table-column

type="selection"

:reserve-selection="true"

/>

...

</el-table>

reserve-selection仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用

methods: {
    getRowKeys(row) {
      return row.Id
    },
    handleSelectionChange(arr){
      if(arr.length>0){
        this.multipleSelection = arr
      }
    },
    DownLoadMedicineSave(){
      let IdsArr =[]
      this.multipleSelection.forEach(function(item){
              IdsArr.push(item.Id)
      })
      this.axios.post(`/api...`, IdsArr)
            .then(res => {
              this.$refs.CatalogTable.clearSelection()
            })
    },
}