Vue el-table 组件通过按钮实现折叠行（底部有手搓table折叠行代码）

上优

已于 2023-03-30 15:48:26 修改

阅读量1.2k

点赞数

文章标签： vue.js javascript 前端

于 2023-03-10 21:55:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_65084919/article/details/129454097

版权

这篇文章展示了如何在Vue项目中结合ElementUI库创建一个表格，其中包含可切换的开关按钮来控制表格行的展开和收起。表格数据动态加载，并且根据开关状态自动展开或收起对应的行。此外，还包含了输入框以供用户输入失败原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<el-table :data="tableData" style="width: 100%" ref="table">
  <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 label="开关">
    <template #default="{row}">
      <el-switch
        @change="changeSwitch($event,row)"
        v-model="row.value"
        :active-value="1"
        :inactive-value="2"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch>
    </template>
  </el-table-column>
  <el-table-column type="expand" width="1">
    <template #default="{row}"> {{row.address}} </template>
  </el-table-column>
</el-table>
</template>
<script>
data() {
 return {
    tableData: [],
 },
 created() {
   this.getData();
 },
 methods:{
   // row 就是一行数据 操控展开和收起
   changeSwitch(is, row) {
     this.$refs.table.toggleRowExpansion(row);
   },
   // 模拟请求数据 数据回显
   getData() {
      setTimeout(() => {
        this.tableData = [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            value: 1,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
            value: 2,
          },
        ];
        this.$nextTick(() => {
          // 判断如果没勾选则开启则展开下拉框
          for (let x of this.tableData) {
            if (x.value == 2) {
              this.$refs.table.toggleRowExpansion(x);
            }
          }
        });
      }, 1000);
    },
 }
}
</script>

下面是我手搓得折叠行table
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
      #main {
        width: 100%;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 10px;
        height: 489px;
        overflow: auto;
      }

      table {
        width: 100%;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        margin: 0;
        border-collapse: collapse;
        border-spacing: 0;
        border-radius: 10px;
      }

      /*控制cellspacing*/
      table td {
        padding: 10px;
        text-align: center;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
      }

      .main_header > tr {
        height: 52px;
        background-color: #f2f2f2;
        color: #333333;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="main">
        <table>
          <thead class="main_header">
            <tr>
              <td>姓名</td>
              <td>办理是否通过</td>
            </tr>
          </thead>

          <tbody v-for="(item,i) in userList" :key="item.id">
            <tr>
              <td>{{item.user_nickname}}</td>
              <td>
                <el-switch
                  v-model="item.result"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeResult($event,i)"
                  :active-value="1"
                  :inactive-value="2"
                >
                </el-switch>
              </td>
            </tr>
            <tr v-if="item.result == 2">
              <td colspan="6" style="text-align: left">
                <div style="display: flex; align-items: center">
                  <div
                    style="
                      white-space: nowrap;
                      margin-bottom: 5px;
                      margin-right: 10px;
                    "
                  >
                    失败原因：
                  </div>
                  <el-input
                    style="width: 100%"
                    size="small"
                    v-model="item.desc"
                    placeholder="请输入内容"
                  ></el-input>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            userList: [
              {
                result: 1,
                user_nickname: "大会",
                desc: "",
              },
              {
                result: 2,
                user_nickname: "大湾区",
                desc: "dasd",
              },
            ],
          };
        },
      });
    </script>
  </body>
</html>