关于element-ui:elementui使用技巧收集

4次阅读

共计 873 个字符，预计需要花费 3 分钟才能阅读完成。

（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）实现成果：

正文完