需求:在开发中会遇到很多表格嵌套表格的使用,一个父级表格通过展开行要打开子级的表格,如果利用官网中的展开行的方式去实现其实是有点困难的

  1. 首先实现行展开,这个是用到了elementUI中的一个属性通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。代码如下

 <el-table-column type="expand" class="childtable">
              <template slot-scope="props">
                <el-table
                  ref="multipleTable"
                  :data="props.row.sonData"
                  style="width: 100%; margin-left: 0"
                  max-height="360"
                  :row-style="rowStyle"
                  :header-cell-style="rowStyle"
                  :cell-style="rowStyle"
                >
                  <el-table-column width="55">
                    <template slot-scope="scope">
                      <el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="xuhao" label="序号"> </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名"
                    :filters="fiterNameData"
                    :filter-method="filterTag"
                    filter-placement="bottom-end"
                  >
                  </el-table-column>
                  <el-table-column prop="info" label="专业"> </el-table-column>
                  <el-table-column
                    prop="sfz"
                    label="身份证号"
                    :filters="fiterNumberData"
                    :filter-method="fiterNumber"
                    filter-placement="bottom-end"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="phone"
                    label="联系电话"
                    :filters="fiterPhoneData"
                    :filter-method="fiterPhone"
                    filter-placement="bottom-end"
                  >
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>

2.在data中声明一个数组,用来渲染表格的展示,数据可以类似于树形结构的模式来整理

 tableData: [
        //外层table的数据
        {
          id: "230211181611f0bWSLJG7copryh9Wv0",
          xuhao: 1,
          sameId: 1,
          zyml: "信息安全",
          yjyz: "信息安全",
          ejzy: "大数据安全研究",
          sjzy: "大数据管理",
          zylb: "组长级",
          addr: "南昌市",
          type: "遴选",
          number: 20,
          paixu:1,
          sonData: [
            //把要嵌套的内层table数据,放在父级table的一个字段里
            {
              cid: "fthgs",
              sameId: 1,
              name: "陈涛",
              info: "信息安全",
              sfz: "612454779799",
              phone: "134154647",
              ischecked: false,
              paixu:1,
              xuhao: 1,
            },
            {
              cid: "trh",
              sameId: 1,
              name: "张三",
              info: "信息安全",
              sfz: "4564648979789",
              phone: "46497987",
              ischecked: false,
              paixu:1,
              xuhao: 2,
            },
            {
              cid: "5823435",
              sameId: 1,
              name: "李四",
              info: "信息安全",
              sfz: "666797964665",
              phone: "4687899999999",
              ischecked: false,
              paixu:1,
              xuhao: 3,
            },
          ],
        },
      ],

3.因为子级的每一行的数据是单选的模式,我这里用了el-checkbox去实现的,所以在子级里面绑定了一个字段ischecked去控制,选中还是取消选中

<el-table-column width="55">
                    <template slot-scope="scope">
                      <el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
                    </template>
                  </el-table-column>

4.表格默认进入展开第一行,这个可以在父级的table身上绑定一个ref属性,在初始化的时候默认展开第一行

 this.$nextTick(() => {
       this.$refs.isExpand.toggleRowExpansion(this.tableData[0], true);
    });

最终的实现效果;

附上完整代码

<template>
    <div>
      <div class="bg">
        <div class="lxbox">
          <!-- 头部 -->
          <div class="top">
            <span class="title">遴选</span>
            <div class="img"></div>
          </div>
          <!-- 中间表格 -->
          <div class="lvtables">
            <el-table :data="tableData" style="width: 100%" ref="isExpand"  max-height="860">
              <el-table-column type="expand" class="childtable">
                <template slot-scope="props">
                  <el-table
                    ref="multipleTable"
                    :data="props.row.sonData"
                    style="width: 100%; margin-left: 0"
                    max-height="360"
                    :row-style="rowStyle"
                    :header-cell-style="rowStyle"
                    :cell-style="rowStyle"
                  >
                    <el-table-column width="55">
                      <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
                      </template>
                    </el-table-column>
                    <el-table-column prop="xuhao" label="序号"> </el-table-column>
                    <el-table-column
                      prop="name"
                      label="姓名"
                      :filters="fiterNameData"
                      :filter-method="filterTag"
                      filter-placement="bottom-end"
                    >
                    </el-table-column>
                    <el-table-column prop="info" label="专业"> </el-table-column>
                    <el-table-column
                      prop="sfz"
                      label="身份证号"
                      :filters="fiterNumberData"
                      :filter-method="fiterNumber"
                      filter-placement="bottom-end"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="phone"
                      label="联系电话"
                      :filters="fiterPhoneData"
                      :filter-method="fiterPhone"
                      filter-placement="bottom-end"
                    >
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column prop="xuhao" label="序号"></el-table-column>
              <el-table-column prop="zyml" label="专业门类"></el-table-column>
              <el-table-column prop="yjyz" label="一级专业"></el-table-column>
              <el-table-column prop="ejzy" label="二级专业"></el-table-column>
              <el-table-column prop="sjzy" label="三级专业"></el-table-column>
              <el-table-column prop="zylb" label="专业类别"></el-table-column>
              <el-table-column prop="addr" label="常住工作地"></el-table-column>
              <el-table-column prop="type" label="组建方式"></el-table-column>
              <el-table-column prop="number" label="可抽取人数"></el-table-column>
            </el-table>
          </div>
          <!-- 底部按钮 -->
          <div class="bottom">
            <el-button plain>取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [
          //外层table的数据
          {
            id: "230211181611f0bWSLJG7copryh9Wv0",
            xuhao: 1,
            sameId: 1,
            zyml: "信息安全",
            yjyz: "信息安全",
            ejzy: "大数据安全研究",
            sjzy: "大数据管理",
            zylb: "组长级",
            addr: "南昌市",
            type: "遴选",
            number: 20,
            paixu:1,
            sonData: [
              //把要嵌套的内层table数据,放在父级table的一个字段里
              {
                cid: "fthgs",
                sameId: 1,
                name: "陈涛",
                info: "信息安全",
                sfz: "612454779799",
                phone: "134154647",
                ischecked: false,
                paixu:1,
                xuhao: 1,
              },
              {
                cid: "trh",
                sameId: 1,
                name: "张三",
                info: "信息安全",
                sfz: "4564648979789",
                phone: "46497987",
                ischecked: false,
                paixu:1,
                xuhao: 2,
              },
              {
                cid: "5823435",
                sameId: 1,
                name: "李四",
                info: "信息安全",
                sfz: "666797964665",
                phone: "4687899999999",
                ischecked: false,
                paixu:1,
                xuhao: 3,
              },
              {
                cid: "frgvsdfg",
                sameId: 1,
                name: "王五",
                info: "信息安全",
                sfz: "156496797",
                phone: "65444478788",
                ischecked: false,
                paixu:1,
                xuhao: 4,
              },
            ],
          },
          {
            id: "230211181611f0bWSLJG7cop156454ryh9Wv0",
            xuhao: 2,
            sameId: 2,
            zyml: "信息安全",
            yjyz: "信息安全",
            ejzy: "大数据安全研究",
            sjzy: "大数据管理",
            zylb: "组长级",
            addr: "南昌市",
            type: "遴选",
            number: 20,
            paixu:2,
            sonData: [
              //把要嵌套的内层table数据,放在父级table的一个字段里
              {
                cid: "gdfgvdsfg",
                sameId: 2,
                name: "陈涛",
                info: "信息安全",
                sfz: "612454779799",
                phone: "134154647",
                ischecked: false,
                paixu:2,
                xuhao: 1,
              },
              {
                cid: "rdgrvfdsfgv",
                sameId: 2,
                name: "张三",
                info: "信息安全",
                sfz: "4564648979789",
                phone: "46497987",
                ischecked: false,
                paixu:2,
                xuhao: 2,
              },
              {
                cid: "gfhsd",
                sameId: 2,
                name: "李四",
                info: "信息安全",
                sfz: "666797964665",
                phone: "4687899999999",
                ischecked: false,
                paixu:2,
                xuhao: 3,
              },
              {
                cid: "hfdgvsd",
                sameId: 2,
                name: "王五",
                info: "信息安全",
                sfz: "156496797",
                phone: "65444478788",
                ischecked: false,
                paixu:2,
                xuhao: 4,
              },
            ],
          },
          {
            id: "dasdsda14564ad9s9ad4",
           xuhao: 3,
            sameId: 3,
            zyml: "信息安全",
            yjyz: "信息安全",
            ejzy: "大数据安全研究",
            sjzy: "大数据管理",
            zylb: "组长级",
            addr: "南昌市",
            type: "遴选",
            number: 20,
            paixu:3,
            sonData: [
              //把要嵌套的内层table数据,放在父级table的一个字段里
              {
                cid: "fgvsdgsefvcdfxghrtf",
                sameId: 3,
                name: "陈涛",
                info: "信息安全",
                sfz: "612454779799",
                phone: "134154647",
                ischecked: false,
                paixu:3,
                xuhao: 1,
              },
              {
                cid: "25543274258",
                sameId: 3,
                name: "张三",
                info: "信息安全",
                sfz: "4564648979789",
                phone: "46497987",
                ischecked: false,
                paixu:3,
                xuhao: 2,
              },
              {
                cid: "rtfefbhdfxrtfg34 ",
                sameId: 3,
                name: "李四",
                info: "信息安全",
                sfz: "666797964665",
                phone: "4687899999999",
                ischecked: false,
                paixu:3,
                xuhao: 3,
              },
              {
                cid: "47527ddfxgbrf",
                sameId: 3,
                name: "王五",
                info: "信息安全",
                sfz: "156496797",
                phone: "65444478788",
                ischecked: false,
                paixu:3,
                xuhao: 4,
              },
            ],
          },
          {
            id: "djaoud9q7y98ye2oh3r",
           xuhao: 4,
            sameId: 4,
            zyml: "信息安全",
            yjyz: "信息安全",
            ejzy: "大数据安全研究",
            sjzy: "大数据管理",
            zylb: "组长级",
            addr: "南昌市",
            type: "遴选",
            number: 20,
            paixu:4,
            sonData: [
              //把要嵌套的内层table数据,放在父级table的一个字段里
              {
                cid: "452574dgvdbvdfc",
                sameId: 4,
                name: "陈涛",
                info: "信息安全",
                sfz: "612454779799",
                phone: "134154647",
                ischecked: false,
                paixu:4,
                xuhao: 1,
              },
              {
                cid: "kifdhgoiuy89jkh98yugb",
                sameId: 4,
                name: "张三",
                info: "信息安全",
                sfz: "4564648979789",
                phone: "46497987",
                ischecked: false,
                paixu:4,
                xuhao: 2,
              },
              {
                cid: "nmkjsfhdf87ye74gfhkdvgcfyu",
                sameId: 4,
                name: "李四",
                info: "信息安全",
                sfz: "666797964665",
                phone: "4687899999999",
                ischecked: false,
                paixu:4,
                xuhao: 3,
              },
              {
                cid: "njuifewhdsiuy798gbug",
                sameId: 4,
                name: "王五",
                info: "信息安全",
                sfz: "156496797",
                phone: "65444478788",
                ischecked: false,
                paixu:4,
                xuhao: 4,
              },
            ],
          },
        ],
        // 姓名筛选
        fiterNameData: [
          {
            text: "陈涛",
            value: "陈涛",
          },
          {
            text: "张三",
            value: "张三",
          },
          {
            text: "李四",
            value: "李四",
          },
          {
            text: "王五",
            value: "王五",
          },
        ],
        // 身份证筛选
        fiterNumberData: [
          {
            text: "612454779799",
            value: "612454779799",
          },
          {
            text: "4564648979789",
            value: "4564648979789",
          },
          {
            text: "666797964665",
            value: "666797964665",
          },
          {
            text: "156496797",
            value: "156496797",
          },
        ],
        // 联系电话筛选
        fiterPhoneData: [
          {
            text: "134154647",
            value: "134154647",
          },
          {
            text: "46497987",
            value: "46497987",
          },
          {
            text: "4687899999999",
            value: "4687899999999",
          },
          {
            text: "65444478788",
            value: "65444478788",
          },
        ],
        //多选的值
        father: [],
        son: [],
      };
    },
    methods: {
      // 调整行样式
      rowStyle({ row, rowIndex }) {
        let bgcolor = {
          background: "#f1f2f3",
          borderBottom: "1px solid #d9d9d9",
        };
        return bgcolor;
      },
      // 过滤姓名
      filterTag(value, row) {
        return row.name === value;
      },
      // 过滤身份证
      fiterNumber(value, row) {
        return row.operation === value;
      },
      // 过滤电话号码
      fiterPhone(value, row) {
        return row.phone === value;
      },
      changeVal(val){
          if(val.ischecked==true){
              this.handleSelectionChange(val)
          }else{
              this.son.forEach((item,index)=>{
                  if(val.cid==item.cid){
                      this.son.splice(index,1)
                      this.father.splice(index,1)
                  }
              })
          }
      },
      // 单选框的选中值
      handleSelectionChange(val) {
        let that=this
        this.tableData.forEach((item) => {
          if(item.sonData && val.sameId==item.sameId){
              let index=that.father.findIndex((item3)=>{
                  return item3.sameId==val.sameId
              })
              if(index>=0){
                  that.father.splice(index,1)
              }
              that.father.push(item)
              item.sonData.forEach((item2)=>{
                 if(item2.cid!=val.cid){
                  item2.ischecked = false;
                 }else if(item2.cid==val.cid){
                  let index2=that.son.findIndex((item4)=>{
                      return item4.sameId==item2.sameId
                  })
                  if(index>=0){
                  that.son.splice(index2,1)
                  }
                  that.son.push(item2)
                 }
              })
          }
        });
        
      },
      //   点击确定按钮
      submit() {
          if (this.tableData.length==this.father.length && this.tableData.length==this.son.length) {
              this.$message({
              message: "恭喜你,提交成功",
              type: "success",
              });
          } else {
              this.$message({
              message: "您还没有完成选中信息哦!!!",
              type: "warning",
              });
          }
      },
   
    },
    mounted() {
      this.$nextTick(() => {
         this.$refs.isExpand.toggleRowExpansion(this.tableData[0], true);
      });
    },
  };
  </script>
  <style lang="scss">
  @import "../style/util.scss";
  .el-table-filter {
    // background-color: pink;
    width: vw(180) !important;
    height: vh(160) !important;
    padding-right: vw(5);
    // left: vw(720) !important;
    .el-checkbox__inner {
      width: vw(20);
      height: vh(20);
    }
    .el-checkbox__input.is-checked .el-checkbox__inner::after {
      width: vw(8);
      height: vh(8);
      left: vw(4);
      top: vh(2);
    }
    .el-table-filter__wrap {
      max-height: vh(100);
      padding: vw(10);
    }
    .el-table-filter__bottom {
      // padding: vw(5)
    }
    .el-table-filter__bottom button {
      font-size: vw(18);
      padding: vw(10);
    }
    .el-table-filter__checkbox-group label.el-checkbox {
      height: vh(30);
    }
  }
  </style>
  <style lang="scss" scoped>
  @import "../style/util.scss";
  .bg {
    width: 100vw;
    height: 100vh;
    // background: rgba(0, 0, 0, 0.3);
    position: relative;
    user-select: none;
    .lxbox {
      // width: vw(1471);
      width: 100%;
      height: vh(792);
      height: 100vh;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 0px 0 vw(4) vw(4);
      position: absolute;
      // top: 50%;
      left: 50%;
      transform: translateX(-50%);
  
      .top {
        width: vw(1471);
        width: 100%;
        height: vh(55);
        background: #fff;
        display: flex;
        justify-content: space-between;
        padding: vh(12) vw(24);
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  
        .title {
          font-family: "PingFangSC-Medium";
          font-size: vw(16);
          color: rgba(0, 0, 0, 0.85);
          line-height: vh(24);
          font-weight: 600;
        }
  
        .img {
          width: vw(24);
          height: vh(24);
          background: url("../assets/close.png") no-repeat;
          background-size: contain;
        }
      }
  
      .lvtables {
        width: vw(1471);
        width: 100%;
        height: vh(690);
        height: vh(900);
        overflow: auto;
        padding: 0 vw(24);
        box-sizing: border-box;
        &::-webkit-scrollbar {
                                  width: 0;
                              }
      }
  
      .bottom {
        width: vw(1471);
        width: 100%;
        position: absolute;
        bottom: 0;
        height: vh(55);
        background: #fff;
        border-top: 1px solid rgba(0, 0, 0, 0.09);
        display: flex;
        padding-right: vw(32);
        box-sizing: border-box;
        justify-content: flex-end;
        align-items: center;
      }
    }
  
    >>> .el-button {
      width: vw(88);
      height: vh(32);
      font-size: vw(16);
    }
  
    >>> .el-button--default {
      margin-right: vw(14);
      color: rgba(0, 0, 0, 0.65);
      font-weight: 400;
      height: vh(38);
      line-height: vh(35);
    }
  
    >>> .el-button--primary {
      font-weight: 400;
      height: vh(38);
      line-height: vh(35);
    }
  
    >>> .el-checkbox__inner {
      width: vw(22);
      height: vh(22);
    }
  
    >>> .el-checkbox__inner::after {
      width: vw(10);
      height: vh(10);
      border: vw(2) solid #fff;
      border-left: 0;
      border-top: 0;
      left: vw(4);
      top: vh(0);
    }
  
    >>> .el-checkbox__input.is-checked .el-checkbox__inner::after {
      transform: rotate(40deg) scaleY(1.2);
    }
  
    >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
      transform: scaleY(0.5);
      top: 45%;
      border: 1px solid #fff;
    }
  
    >>> .el-table .cell {
      line-height: vh(48) !important;
      text-align: center !important;
    }
  
    >>> .el-table__expand-icon {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
      margin-right: vw(20);
      position: absolute;
      left: 34%;
      top: 34%;
      user-select: none;
      color: rgb(175, 175, 175);
    }
  
    >>> .el-table__expand-icon .el-icon-arrow-right {
      font-weight: bold;
    }
  
    >>> .el-table__expand-icon .el-icon-arrow-right::before {
      content: "\e6d9";
      border: 1px solid rgb(175, 175, 175);
      padding: vw(3);
      font-size: vw(10);
    }
  
    >>> .el-table__expand-icon--expanded .el-icon-arrow-right::before {
      content: "\e6d8";
      font-weight: bold;
      padding: vw(3);
      font-size: vw(10);
    }
  }
  >>> .el-table-filter {
    width: vw(500) !important;
    height: vh(200) !important;
  }
  >>> .el-table thead {
    font-family: "PingFangSC-Medium";
    font-size: vw(16);
    color: #333333;
    letter-spacing: 0;
    font-weight: 500;
  }
  >>> .el-table__empty-block {
    min-height: vh(35);
    line-height: vh(35);
  }
  >>> .el-table__header {
    .el-checkbox {
      display: none;
    }
  
  }
  >>>.el-table td.el-table__cell div{
      font-family: 'PingFangSC-Regular';
      font-size: vw(16);
      color: #333333;
      line-height: vh(36);
    }
    >>>.el-table__column-filter-trigger i{
      transform: scale(1.3);
      margin-left: vw(5);
      background: #FFFFFF;
      border: 1px solid rgba(230,230,230,1);
    }
    >>>.el-icon-arrow-down:before{
      content: "\e790" !important;
    }
    >>>.el-table__body-wrapper {
      &::-webkit-scrollbar {
              // width: 0 !important;
            }
    }
  </style>
  
Logo

前往低代码交流专区

更多推荐