# 展开行

展开行
在组件中需配置
firstColumn: { type: 'expand' }
<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table
        title="展开行"
        :table="table"
        :columns="table.columns"
        :isShowPagination="false"
      >
        <template #expand="{ scope }">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="姓名" name="name">
              <div>姓名：{{ scope.row.name }}</div>
            </el-tab-pane>
            <el-tab-pane label="日期" name="date">
              <div>日期：{{ scope.row.date }}</div>
            </el-tab-pane>
            <el-tab-pane label="状态" name="status">
              <div>状态：{{ scope.row.status }}</div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </t-table>
    </t-layout-page-item>
  </t-layout-page>
</template>

<script>
export default {
  name: "redioDemo",
  data() {
    return {
      activeName: "name",
      table: {
        firstColumn: { type: "expand" }, // 显示展开
        data: [
          {
            id: "1",
            date: "2019-09-25",
            name: "张三",
            status: "2",
            address: "广东省广州市天河区",
          },
          {
            id: "2",
            date: "2019-09-26",
            name: "张三1",
            status: "1",
            address:
              "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2",
          },
          {
            id: "3",
            date: "2019-09-27",
            name: "张三2",
            status: "3",
            address: "广东省广州市天河区3",
          },
        ],
        columns: [
          { prop: "name", label: "姓名", minWidth: "100" },
          { prop: "date", label: "日期", minWidth: "180" },
          { prop: "address", label: "地址", minWidth: "220" },
          { prop: "date", label: "日期", minWidth: "180" },
        ],
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log("切换tab", tab, event);
    },
  },
};
</script>
← 第一列显示复选框和序列号分页功能 →