码迷,mamicode.com
首页 > 其他好文 > 详细

element-ui多选框reserve-selection指定row-key保留数据更新之前的数据

时间:2018-09-11 21:27:33      阅读:1304      评论:0      收藏:0      [点我收藏+]

标签:ima   数据   ges   选中   select   nbsp   100%   ret   cti   

element-UI 的table表格数据有提供多项框的功能,只要在表格列中多加一列就可以选择表格的数据
但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页也就是上一次请求的数据的选中状态就没有了.element提供了reserve-selection可以保存数据更新前选中的值,这个属性还需要指定row-key.
先看下页面的效果:
技术分享图片
技术分享图片
 
技术分享图片
注意事项:
技术分享图片
技术分享图片
具体看代码:
<el-table
    :data="tableData6"
    :row-key="getRowKey"
    ref="buyerTable"
    height="300"
    @selection-change="handleSelectionChange"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      :reserve-selection="true"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleBuyerSizeChange"
    @current-change="handleBuyerCurrentChange"
    :current-page="currentBuyerPage"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="buyerPageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="buyerTotalCount">
  </el-pagination>

js代码:

methods: {
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },

    // 列表选择,val选中的表格行数据
    handleSelectionChange (val) {
      console.log(val)
    },

    // 清空选择的值
    clearSelect () {
      this.$refs.buyerTable.clearSelection()
    }
}

 

element-ui多选框reserve-selection指定row-key保留数据更新之前的数据

标签:ima   数据   ges   选中   select   nbsp   100%   ret   cti   

原文地址:https://www.cnblogs.com/steamed-twisted-roll/p/9629681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!