vue el-table expand只展开一行

el-table 有展开行功能，但是展开多行并不好看，所以需要设置 expand只展开一行，用expand-change可以实现

对于 el-table 绑定填充数据为 tableData，对它的一个 el-table-column，将其设置为：type=“expand”，并且在其中定义一个表格，绑定填充数据为 childTableData，这样点击一行就会展开一个表格，且其填充数据是另一个数组，实际项目中可以从后台获取。

代码如下：

    <el-table
      highlight-current-row
      class="uiot-table"
      max-height="601"
      size="mini"
      border
      :default-sort="{prop: 'name', order: 'ascending'}"
      :data="tableData"
      @sort-change="currSortChange"
      @current-change="currRowchange"
      @expand-change="expandChange">
      <el-table-column type="expand">
        <template>
          <el-table class="table-expand" :data="childTableData" >
            <el-table-column prop="category" :label="$t('deviceManage.device.propTable.name')"></el-table-column>
            <el-table-column prop="address" :label="$t('deviceManage.device.propTable.code')"></el-table-column>
            <el-table-column prop="shop" :label="$t('deviceManage.device.propTable.val')"></el-table-column>
            <el-table-column prop="shopId" label="任务状态"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column :label="$t('deviceManage.device.table.name')" prop="id"></el-table-column>
      <el-table-column :label="$t('deviceManage.device.table.lat')" prop="name"></el-table-column>
      <el-table-column :label="$t('deviceManage.device.table.lng')" prop="desc"></el-table-column>
    </el-table>
<script>
import {
  HeadCellStyle,
  HeadRowStyle,
  RowStyle,
  CellStyle
} from "@/utils/method";
import "@/styles/uiot.scss";
import apis from "@/api/devApi";
import devDlg from "./components/deviceDlg"

export default {
  components: {
    devDlg
  },
  data() {
    return {
      CurrentRow: "",
      oneDev: {},
      searchName: "",
      dialogType: "new",
      dialogVisible: false,
      tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        },
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        },
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        },
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          desc: "荷兰优质淡奶，奶香浓而不腻"
        }
      ],
      childTableData: [
        {
          category: "江浙小吃、小吃零食",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          category: "江浙小吃、小吃零食",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          category: "江浙小吃、小吃零食",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        },
        {
          category: "江浙小吃、小吃零食",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333"
        }
      ],
      total: 0,
      size: 20,
      currPage: 1,
      sortType: true,
      sortName: "name"
    };
  },
  methods: {
    expandChange(row,expandedRows){
      if(expandedRows.length>1){
        expandedRows.shift()
      }
    }
  }
};
</script>

页面效果如下：

每次点击只会展开表格的一行。