element-ui使用技巧收集

1. table表格展开行

（1）功能需求：点击table某行任意位置，则展开该行二级表格，同时收起其他行展开。
（2）实现方法：

//template
<el-table
  :data="tableData"
  @row-click="getRowClick"
  row-key="no"
  :expand-row-keys="expands"
>
  <el-table-column prop="no" label="序号" width="65"></el-table-column>
  <el-table-column prop="recordId" label="入库编号"></el-table-column>
  <el-table-column type="expand">
  //二级表格
    <template slot-scope="scope">
      <div class="childrenClass">
        <el-table :data="scope.row.productDetails">
          <el-table-column prop="name" label="产品名称">
          </el-table-column>
        </el-table>
      </div>
    </template>       
  </el-table-column>
</el-table>
//script
expands: [];
//获取需要展开行的no属性，并赋值给展开行方法的数组
getRowClick(row: any) {
  if (this.expands.indexOf(row.no) < 0) {
    this.expands = [];
    this.expands.push(row.no);
  } else {
    this.expands = [];
  }
}

（3）方法介绍：
@row-click：当某一行被点击时会触发该事件；
row-key：行数据的 Key，用来优化 Table 的渲染，此项目使用tableData中的no属性作为key；
expand-row-keys：可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
粗体
（4）实现效果：