消息关闭
    暂无新消息!

最近在用element-ui vue版 开发运营系统,分页是后端来分页,前端用的element-ui,现在在做一个多选表格
如下图

每一次分页,都会获得列表,渲染在表格上,要求用户点击表格,第一页 第二页随便点,最后点击保存,会向后端传送一个关于id的数组,这个容易实现,用本地存储起来就可以。那么我从后端获取数据的时候,如何回显呢?因为每次跳到第一页和第N页 都需要渲染那个选中状态,有类似的demo吗?


2个回答

︿ 0

官网的demo稍改改就可以了

<div id="app">
<template>
  <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" style="width: 100%">
    <el-table-column type="selection" width="55">
    </el-table-column>
    <el-table-column label="日期" width="120">
      <template scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="120">
    </el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>
</div>
var Main = {
    data() {
      return {
        tableData3: []
      }
    },

    methods: {
      // mock 数据获取 
      getList() {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve([{
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-08',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-06',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-07',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }])
          }, 500)
        })
      }
    },
    created() {
      this.getList().then(data => {
        this.tableData3 = data
        // 只需在这样根据行ids过滤出要选中的行
        // this.tableData3.filter
        this.tableData3.forEach((row, index) => {
          // 演示选中奇数行
          if (index % 2) {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(row, true);
            })
          }
        })
      })
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

http://jsfiddle.net/hugaungju...