关于elementUI,el-table中展开行后嵌套表格,外层操作按钮el-switch 开关和展开行事件处理

这篇文章距离上次修改已过222天，其中的内容可能已经有所变动。

在Element UI的el-table组件中嵌套表格时，如果需要在外层操作按钮如el-switch开关来控制内层展开行的显示和隐藏，可以通过el-switch的变化来控制内层表格的显示状态。

以下是一个简单的例子，展示了如何通过el-switch控制内层表格的行展开：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 内层嵌套表格 -->
        <el-table :data="props.row.innerData" style="width: 100%">
          <el-table-column prop="date" label="日期" width="180"></el-table-column>
          <el-table-column prop="name" label="姓名" width="180"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- 控制展开的开关 -->
        <el-switch
          v-model="scope.row.expanded"
          @change="handleSwitchChange(scope.row)">
        </el-switch>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          innerData: [
            { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
            // ... 更多内层数据
          ],
          expanded: false, // 控制展开状态
        },
        // ... 更多数据
      ],
    };
  },
  methods: {
    handleSwitchChange(row) {
      row.expanded = !row.expanded; // 切换展开状态
    },
  },
};
</script>

在这个例子中，每一行数据都有一个expanded属性，用来控制该行的展开状态。el-switch组件的v-model绑定到了expanded属性上，通过@change事件监听开关状态的变化，并调用handleSwitchChange方法来更新行的展开状态。

关于elementUI,el-table中展开行后嵌套表格,外层操作按钮el-switch 开关和展开行事件处理

评论已关闭

推荐阅读