封装了一个组件,子组件中有带有复选框的element表格,数据都是在父组件中控制的,怎样让子组件中的复选框默认勾选上
点击编辑的时候,弹出弹窗,弹窗的表格复选框自动勾选上。
父组件数据如下,通过selected来控制复选框的勾选
子组件就是个elementui的带复选框组件
html:
<template>
<el-table
ref="multipleTable"
:data="tableData"
row-key="id"
@selection-change="handleSelectionChange"
style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
js:
<script>
export default {
data() {
return {
// 默认勾选的数据
checkeAll: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}
],
// 表格数据
tableData: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
}
},
mounted() {
this.getDefault();
},
methods: {
handleSelectionChange(val) {
this.checkeAll = val;
},
getDefault() {
this.checkeAll.forEach((val, index) => {
let obj = this.tableData.find(o => o.id === val.id);
if(obj) this.$refs.multipleTable.toggleRowSelection(obj);
})
}
}
}
</script>