element表格展开行手风琴效果（点箭头每次仅展开一行）及父子组件数据传输

效果

最开始时点行就可以展开(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>