實現element-ui表格el-table只展開一行

阿新 • • 發佈：2020-08-15

　　專案開發中，遇到個詳情頁面，展示項過多，在螢幕上展示出現過長的橫向滾動條，使用者體驗度不高，跟產品協商，由產品列出優先展示項，剩下部分摺疊

　　標紅屬性:

　　　　row-click: 當某一行點選時觸發

　　　　row-key: 行資料的key,用於優化talbe的渲染

　　　　expand-row-keys: 可通過這個屬性設定表格的當前展開行(必需row-key屬性)

　　　　expand-change: 用於某一行點選展開或者關閉時觸發(展開行時，第二個屬性為expandedRows，關閉行時，第二個屬性為expanded)

<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: "王小虎夫妻店"+'<br>'+"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;
}