Vue.js + Element-ui Table: как переместить выбранную строку в начало таблицы - PullRequest
0 голосов
/ 26 октября 2018

Я попытался переместить выбранную строку флажка в верхнюю часть таблицы. Я нахожу, как это сделать на javascript , но я не могу сделать это с помощью vue. Начальные условия задачи:

  1. в таблице может отображаться более 2 тысяч записей;
  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>

В чем моя проблема? и какое решение возможно для этой проблемы?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...