关于javascript: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>