element-ui el-table表格多选实现翻页勾选 翻页有记忆选择功能

导读:本篇文章讲解 element-ui el-table表格多选实现翻页勾选 翻页有记忆选择功能,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

根据需求需要表格多选,并且翻页的时候也需要翻页勾选。直接上代码:

先上效果图:图一为第一页,图二为第二页

图一:
在这里插入图片描述

图二:
在这里插入图片描述

 <el-table
          ref="table"
          :data="tablesData"
          style="width: 100%"
          :header-cell-style="{
            background: '#FAFAFA',
            color: '#000000',
            borderRight: '1px solid #fff'
          }"
          @selection-change="handleSelectionChange" 
          :row-key="getRowKey" 
        >
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true" 
          ></el-table-column>
  </el-table>

	methods: {
		// 指定一个key标识这一行的数据
		getRowKey(row) {
		  return row.id
		},
		
		// val表示选中的表格行数据
		handleSelectionChange(val) {
		  console.log(val)
		},
    }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/64804.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!