場景：
一個帶多選、關鍵字搜索功能的表格。要求在以下情形下， 保持數據項選中狀態的一致：
1、有、無關鍵字；
2、數據項選中狀態進行切換；
具體如下圖：
案例代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script> <link href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css" rel="stylesheet"> </head> <body> <div id="app"> <template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange1"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column align="right"> <template slot="header" slot-scope="scope"> <el-input @input="searchChange1" v-model="search" size="mini" placeholder="輸入關鍵字搜索"/> </template> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit </el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete </el-button> </template> </el-table-column> </el-table> </template> </div> <script> var Main = { data() { return { search: '', searchFlag: false, tableData: [], originArr: [{ date: '2016-05-03', name: '1', }, { date: '2016-05-02', name: '2', }, { date: '2016-05-04', name: '3', }, { date: '2016-05-01', name: '4', }, { date: '2016-05-08', name: '5', }, { date: '2016-05-06', name: '6', }, { date: '2016-05-07', name: '王小虎', }], multipleSelection: [] } }, created() { this.tableData = [...this.originArr]; // 保持源數組的獨立性， }, methods: { handleSelectionChange1(val) { console.log('改變：', this.searchFlag) console.log(this.tableData) console.log(this.originArr) if (this.searchFlag) { // 手動選中過程中不予響應 return; } this.tableData.forEach(item => { item.checked = false; }) val.forEach(row => { row.checked = true; }) }, searchChange1() { var arr = this.originArr.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase())); this.tableData.splice(0,this.tableData.length); Array.prototype.push.apply(this.tableData, arr); // 不改變tableData 數組的引用地址。保持其響應式。 this.$nextTick(() => { this.searchFlag = true // 手動選中前 禁止多選事件響應 this.tableData.forEach(item => { if (item.checked) this.$refs.multipleTable.toggleRowSelection(item, true); }) this.searchFlag = false; // 放開多選事件響應 }) } } } var Ctor = Vue.extend(Main) new Ctor().$mount('#app') </script> </body> </html>
關鍵解讀：
1、對數組項 使用 check屬性 來標識是否被選中；
2、多選事件里，保證選中項 被正確標識；
3、輸入框改變事件里，進行表格數據的正確填充（保證其引用不變，否則 手動選中不起作用）；在nextTick事件里，進行手動選中