成果
最开始时点行就能够开展(row-click)，后果甲方说不喜爱点行非要点箭头，我真是醉了！白瞎了用户体验，放着那么宽的行不点非要点击箭头那几个像素。
参考：
https://blog.csdn.net/weixin_...
应用办法：
@expand-change="open" //办法名随便取全副代码HelloWorld.vue
<template> <div> <el-table :data="tableData" :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="open" style="width: 100%" border > <el-table-column type="expand"> <template> <SubPage :subData="message" /> </template> </el-table-column> <el-table-column prop="date" label="日期"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> </div></template><script>import SubPage from './SubPage.vue'export default { name: "test", components: { SubPage }, data() { return { // 要开展的行，数值的元素是row的key值 expands: [], getRowKeys(row) { return row.id; }, message: "", tableData: [{ id: 0, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', phone: "11111", }, { id: 1, date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', phone: "11111", }, { id: 2, date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', phone: "11111", }, { id: 3, date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', phone: "11111", }] } }, methods: { open(row) { console.log(row.id); if (this.expands.includes(row.id)) { this.expands = this.expands.filter(val => val !== row.id); } else { if (this.expands.length != 0) { this.expands.splice(0, this.expands.length); this.expands.push(row.id); } else { this.expands.push(row.id); } } this.message = "子组件数据" + row.id } }}</script>子页面SubPage.vue
数据传子组件就不必多说了
<template> <div>{{ message }}</div></template><script>export default { name: "test3", props: { subData: String, }, data() { return { message: this.subData } }}</script>