html 表格不选中状态,elementui 表格应用1:多选+搜索框+保持选中状态

Title

type="selection"width="55">

label="日期"width="120">

{{ scope.row.date }}

prop="name"label="姓名"width="120">

align="right">

@input="searchChange1"v-model="search"size="mini"placeholder="输入关键字搜索"/>

size="mini"@click="handleEdit(scope.$index, scope.row)">Edit

size="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">Delete

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')