实现element-ui表格el-table展开行

实现element-ui表格el-table展开行

<template>  <el-table :data="tableData" style="width: 100%" @row-click="rowClick" :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="expandChange" ref="tableList">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="right" inline class="demo-table-expand" align="right">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column label="商品 ID" prop="id"></el-table-column>
    <el-table-column label="商品名称" prop="name"></el-table-column>
    <el-table-column label="描述" prop="desc"></el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶,奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店"+'
'
+"asfdasfafasdfasdfas", shopId: "10333", }, { id: "12987123", name: "好滋好味鸡蛋仔", category: "江浙小吃、小吃零食", desc: "荷兰优质淡奶,奶香浓而不腻", address: "上海市普陀区真北路", shop: "王小虎夫妻店", shopId: "10333", }, { id: "12987125", name: "好滋好味鸡蛋仔", category: "江浙小吃、小吃零食", desc: "荷兰优质淡奶,奶香浓而不腻", address: "上海市普陀区真北路", shop: "王小虎夫妻店", shopId: "10333", }, { id: "12987126", name: "好滋好味鸡蛋仔", category: "江浙小吃、小吃零食", desc: "荷兰优质淡奶,奶香浓而不腻", address: "上海市普陀区真北路", shop: "王小虎夫妻店", shopId: "10333", }, ], expands: [] }; }, methods: { rowClick(row){//点击行时展开收起 this.$refs.tableList.toggleRowExpansion(row); }, expandChange(row,expandedRows){// let that = this; if(expandedRows.length){//此时展开 that.expands = []; if(row){ that.expands.push(row.id); } }else{//折叠 that.expands = []; } }, getRowKeys(row){//行数据的key,用于优化table的渲染 return row.id; } } }; </script> <style scoped> .demo-table-expand { font-size: 0; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } </style><style>//在添加scoped时未生效.demo-table-expand .label{ width:150px; color: #99a9bf;} </style>

row-click: 当某一行点击时触发

row-key: 行数据的key,用于优化talbe的渲染

expand-row-keys: 可通过这个属性设置表格的当前展开行(必需row-key属性)

expand-change: 用于某一行点击展开或者关闭时触发(展开行时,第二个属性为expandedRows,关闭行时,第二个属性为expanded)


后续问题:

列表中存在操作按钮列,点击操作按钮时,同时会触发row-click

问题解决:

<el-button type="warning" size="mini" circle icon="el-icon-question" @click.stop="diagnose"></el-button>

你可能感兴趣的:(element,vue)