Vue.js + Element-ui表:如何将所选行移到表顶部

时间:2018-10-26 17:40:01

标签: javascript vuejs2 element-ui

我尝试将选定的复选框行移到表格顶部。 我找到了如何在javascript上执行此操作,但是用vue无法做到。 问题的初始条件:

  1. 在表中可以显示超过2000条记录;
  2. 应保存所选行,因为可以执行重复查询,这将返回其他行(搜索结果)。

我的尝试:

var Main = {
  data() {
    return {
      data_all: [{
        categoryNumber: '1',
        categoryName: 'main',
        subCategoryNumber: '11',
        subCategoryName: 'qwe'
      }, {
        categoryNumber: '1',
        categoryName: 'main',
        subCategoryNumber: '12',
        subCategoryName: 'asd'
      }, {
        categoryNumber: '1',
        categoryName: 'main',
        subCategoryNumber: '13',
        subCategoryName: 'zxc'
      }, {
        categoryNumber: '2',
        categoryName: 'other',
        subCategoryNumber: '21',
        subCategoryName: 'poi'
      }],
      category_list: [],
      subCategory_list: [],
      category_selected: null,
      subCategory_selected: [],
      table_unselected: [],
      table_selected: []
    }
  },
  computed: {
    datatable: function() {
      return this.table_selected.concat(this.table_unselected);
    }
  },
  created: function() {
    let uniqueCategory = {},
      category = [],
      subCategory = [];
    for (i = 0; i < this.data_all.length; i++) {
      let item = this.data_all[i],
        category_option = {
          number: item.categoryNumber,
          name: item.categoryName
        },
        subCategory_option = {
          number: item.subCategoryNumber,
          name: item.subCategoryName
        };
      subCategory.push(subCategory_option);
      if (!uniqueCategory[item.categoryNumber]) {
        uniqueCategory[item.categoryNumber] = true;
        category.push(category_option);
      }
    }
    this.category_list = category;
    this.subCategory_list = subCategory;
  },
  methods: {
    getSubCategory(category_selected = null) {
      let subCategory = [];
      for (i = 0; i < this.data_all.length; i++) {
        if (!category_selected || (category_selected && this.data_all[i].categoryNumber === category_selected)) {
          let subCategory_option = {
            number: this.data_all[i].subCategoryNumber,
            name: this.data_all[i].subCategoryName
          };
          subCategory.push(subCategory_option);
        }
      }
      this.subCategory_selected = [];
      this.subCategory_list = subCategory;
    },
    searchCategory: function() {
      let subCategory = this.subCategory_list.filter(item => this.subCategory_selected.indexOf(item.number) >= 0);
      this.table_unselected = this.subCategory_selected.length > 0 ? subCategory : this.subCategory_list;
    },
    selectMyTable: function(selection) { //run twice
      let unselect = this.table_unselected,
        selection_number = selection.map(item => item.number);
      unselect = unselect.filter(item => selection_number.indexOf(item.number) == -1);
      this.table_selected = selection;
      this.table_unselected = unselect;
    }
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@2.4.9/lib/theme-chalk/index.css");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.9/lib/index.js"></script>

<div id="app">
  Category:
  <el-select size="mini" clearable placeholder="Select category" v-model="category_selected" v-on:change="getSubCategory(category_selected)">
    <el-option v-for="item in category_list" :label="item.name" :value="item.number"></el-option>
  </el-select>
  Subcategory:
  <el-select size="mini" clearable multiple collapse-tags placeholder="Select subcategory" v-model="subCategory_selected">
    <el-option v-for="item in subCategory_list" :label="item.name" :value="item.number"></el-option>
  </el-select>
  <el-button size="mini" type="primary" round icon="el-icon-search" v-on:click="searchCategory">Search</el-button>
  <el-table v-on:selection-change="selectMyTable" :data="datatable" ref="myTable" border size="mini" height="260" style="width: 100%">
    <el-table-column type="selection" width="35">
    </el-table-column>
    <el-table-column prop="number" width="80" label="Number">
    </el-table-column>
    <el-table-column prop="name" label="Name">
    </el-table-column>

  </el-table>
</div>

我的问题是什么?对此问题有什么解决方案?

0 个答案:

没有答案