Vue+ElementUI tag标签与表格联动效果 分页不刷新 上下移

分页不刷新

如果需要使用多选框选择多条数据，翻页后一般会重新请求后台，之前选择的数据就会丢失
我们需要给表格行指定一个唯一的key值
这个代码不知道为什么不是五颜六色的了 我很不喜欢 希望官方有待改进
重点是ElementUI表格API里面的 row-key 可以自己去查阅看一下

<el-table   :data="LevelList.slice((page - 1) * size, page * size)"
      style="width: 100%"
      :row-key="getRowKey"
	  ref="multipleTbale"
      @selection-change="handleSelectionChange"
>
</el-table>

给表格行加 :reserve-selection=“true” 必填项

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

表格选中状态控制tag标签

一个简单tag标签的渲染

<el-tag
      v-for="(tag, index) in multipleSelection"
      :key="index"
      closable
      class="tag-item"
      @close="closeTag(tag)"
      >{{ tag.store_name }}
</el-tag>

这个是表格的@selection-change 事件 数组是选中的数据

//多行选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

 getRowKey(row) {
      return row.id;
   },
 getIndexById(id) {
      let index;
      for (let i = 0; i < this.LevelList.length; i++) {
        if (id === this.LevelList[i].id) {
          index = i;
          break;
        }
      }
      return index;
    },

tag标签取消同步表格状态

然后是tag标签的取消同步表格的状态取消
toggleRowSelection 重点是这个属性
toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中，这个官网写得很清楚详情去API看

 // 通过标签的关闭来实现数据多选框的取消
    closeTag(data) {
      this.multipleSelection.splice(this.multipleSelection.indexOf(data), 1);
      let index = this.getIndexById(data.id);
      console.log(this.multipleSelection);
      this.$refs.multipleTbale.toggleRowSelection(this.LevelList[index], false);
    },

现在已经可以表格选中多条分页不刷新 以及tag标签跟表格选中状态双向绑定了

表格获取每行的下标的办法

通过这两个属性 就是愉快的操作表格行的数据了

scope.$index ：获取当前行的下标
scope.row：获取当前行的对象

上移下移表格

表格行的上移下移就是，获取当前行的下标，判断当前行的坐标是否为0，如果为0，说明已经是第一行的，不能再上移了；对于下移，就是判断当前行坐标加上1是否等于这个数组的长度，或者说当前行坐标是否等于数组长度减1，如果等于，说明已经是最后一行，不能再下移了。利用数组方法splice来写 splice详情去菜鸟这里不解释了

//上移 index是下标 row是行数据 LevelList是表格数据
 topRow(index, row) {
      var that = this;
      if (index > 0) {
        let update = that.LevelList[index - 1];
        that.LevelList.splice(index - 1, 1);
        that.LevelList.splice(index, 0, update);
      } else {
        Message("已经是第一条,不可上移");
      }
    },
    //下移
    bomRow(index, row) {
      var that = this;
      if (index + 1 == that.LevelList.length) {
        Message("已经是最后一条,不可下移");
      } else {
        let downdate = that.LevelList[index + 1];
        that.LevelList.splice(index + 1, 1);
        that.LevelList.splice(index, 0, downdate);
      }
    },

表单分页

<el-table style="width: 100%;" :data="userList.slice((currentPage-1)*pagesize,currentPage*pagesize)"  //对数据请求的处理，最为重要的一句话>