我尝试将选定的复选框行移到表格顶部。 我找到了如何在javascript上执行此操作,但是用vue无法做到。 问题的初始条件:
我的尝试:
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>
我的问题是什么?对此问题有什么解决方案?