为了封装组件
父组件
<template>
<div>
<!-- :tableData自定义属性,tableData1,tableData2,是要传过去的数据 -->
<!-- @handle,$event是子组件传过来的方法和数据 -->
<!-- ps:子组件传多个字,将$event换成arguments接收 -->
<Table :tableData="tableData1" @handle="ok1($event)"></Table>
<Table :tableData="tableData2" @handle="ok2($event)"></Table>
</div>
</template>
<script>
// 导入子组件
import Table from './index';
export default {
data() {
return {
tableData1: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
],
tableData2: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
]
};
},
// 注册子组件
components: {
Table
},
methods: {
ok1(val) {
console.log(val);
},
ok2(val) {
console.log(2, val);
}
},
//生命周期 - 创建完成(访问当前this实例)
created() {}
};
</script>
<style lang='' scoped>
</style>
子组件
<template>
<div>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<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 prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[0]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</div>
</template>
<script>
export default {
// 接收父组件传来的值
props: ['tableData'],
data() {
return {
multipleSelection: []
};
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
//子组件通过$emit给父组件传值
this.$emit('handle', this.multipleSelection);
}
},
//生命周期 - 创建完成(访问当前this实例)
created() {}
};
</script>
<style lang='' scoped>
</style>
子组件传多个值
子组件
handleSelectionChange(val) {
this.$emit('handle', val, 1, 2, 3);
}
父组件
<Table :tableData="tableData2" @handle="ok2(arguments)"></Table>
ok2(val) {
console.log(2,val);
}