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

<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/[email protected]/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>

你可能感兴趣的:(vue.js,javascript,前端)