devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue+ElementUI中表格嵌套的使用方法_element表格展开嵌套表格

作者：Monodyee | 2024-03-21 08:55:19

赞

踩

element表格展开嵌套表格

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

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

  1.  <el-table-column type="expand" class="childtable">
  2.               <template slot-scope="props">
  3.                 <el-table
  4.                   ref="multipleTable"
  5.                   :data="props.row.sonData"
  6.                   style="width: 100%; margin-left: 0"
  7.                   max-height="360"
  8.                   :row-style="rowStyle"
  9.                   :header-cell-style="rowStyle"
  10.                   :cell-style="rowStyle"
  11.                 >
  12.                   <el-table-column width="55">
  13.                     <template slot-scope="scope">
  14.                       <el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
  15.                     </template>
  16.                   </el-table-column>
  17.                   <el-table-column prop="xuhao" label="序号"> </el-table-column>
  18.                   <el-table-column
  19.                     prop="name"
  20.                     label="姓名"
  21.                     :filters="fiterNameData"
  22.                     :filter-method="filterTag"
  23.                     filter-placement="bottom-end"
  24.                   >
  25.                   </el-table-column>
  26.                   <el-table-column prop="info" label="专业"> </el-table-column>
  27.                   <el-table-column
  28.                     prop="sfz"
  29.                     label="身份证号"
  30.                     :filters="fiterNumberData"
  31.                     :filter-method="fiterNumber"
  32.                     filter-placement="bottom-end"
  33.                   >
  34.                   </el-table-column>
  35.                   <el-table-column
  36.                     prop="phone"
  37.                     label="联系电话"
  38.                     :filters="fiterPhoneData"
  39.                     :filter-method="fiterPhone"
  40.                     filter-placement="bottom-end"
  41.                   >
  42.                   </el-table-column>
  43.                 </el-table>
  44.               </template>
  45.             </el-table-column>

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

  1.  tableData: [
  2.         //外层table的数据
  3.         {
  4.           id: "230211181611f0bWSLJG7copryh9Wv0",
  5.           xuhao: 1,
  6.           sameId: 1,
  7.           zyml: "信息安全",
  8.           yjyz: "信息安全",
  9.           ejzy: "大数据安全研究",
  10.           sjzy: "大数据管理",
  11.           zylb: "组长级",
  12.           addr: "南昌市",
  13.           type: "遴选",
  14.           number: 20,
  15.           paixu:1,
  16.           sonData: [
  17.             //把要嵌套的内层table数据，放在父级table的一个字段里
  18.             {
  19.               cid: "fthgs",
  20.               sameId: 1,
  21.               name: "陈涛",
  22.               info: "信息安全",
  23.               sfz: "612454779799",
  24.               phone: "134154647",
  25.               ischecked: false,
  26.               paixu:1,
  27.               xuhao: 1,
  28.             },
  29.             {
  30.               cid: "trh",
  31.               sameId: 1,
  32.               name: "张三",
  33.               info: "信息安全",
  34.               sfz: "4564648979789",
  35.               phone: "46497987",
  36.               ischecked: false,
  37.               paixu:1,
  38.               xuhao: 2,
  39.             },
  40.             {
  41.               cid: "5823435",
  42.               sameId: 1,
  43.               name: "李四",
  44.               info: "信息安全",
  45.               sfz: "666797964665",
  46.               phone: "4687899999999",
  47.               ischecked: false,
  48.               paixu:1,
  49.               xuhao: 3,
  50.             },
  51.           ],
  52.         },
  53.       ],

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

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

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

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

最终的实现效果;

附上完整代码

  1. <template>
  2.     <div>
  3.       <div class="bg">
  4.         <div class="lxbox">
  5.           <!-- 头部 -->
  6.           <div class="top">
  7.             <span class="title">遴选</span>
  8.             <div class="img"></div>
  9.           </div>
  10.           <!-- 中间表格 -->
  11.           <div class="lvtables">
  12.             <el-table :data="tableData" style="width: 100%" ref="isExpand"  max-height="860">
  13.               <el-table-column type="expand" class="childtable">
  14.                 <template slot-scope="props">
  15.                   <el-table
  16.                     ref="multipleTable"
  17.                     :data="props.row.sonData"
  18.                     style="width: 100%; margin-left: 0"
  19.                     max-height="360"
  20.                     :row-style="rowStyle"
  21.                     :header-cell-style="rowStyle"
  22.                     :cell-style="rowStyle"
  23.                   >
  24.                     <el-table-column width="55">
  25.                       <template slot-scope="scope">
  26.                         <el-checkbox v-model="scope.row.ischecked" @change="changeVal(scope.row)"></el-checkbox>
  27.                       </template>
  28.                     </el-table-column>
  29.                     <el-table-column prop="xuhao" label="序号"> </el-table-column>
  30.                     <el-table-column
  31.                       prop="name"
  32.                       label="姓名"
  33.                       :filters="fiterNameData"
  34.                       :filter-method="filterTag"
  35.                       filter-placement="bottom-end"
  36.                     >
  37.                     </el-table-column>
  38.                     <el-table-column prop="info" label="专业"> </el-table-column>
  39.                     <el-table-column
  40.                       prop="sfz"
  41.                       label="身份证号"
  42.                       :filters="fiterNumberData"
  43.                       :filter-method="fiterNumber"
  44.                       filter-placement="bottom-end"
  45.                     >
  46.                     </el-table-column>
  47.                     <el-table-column
  48.                       prop="phone"
  49.                       label="联系电话"
  50.                       :filters="fiterPhoneData"
  51.                       :filter-method="fiterPhone"
  52.                       filter-placement="bottom-end"
  53.                     >
  54.                     </el-table-column>
  55.                   </el-table>
  56.                 </template>
  57.               </el-table-column>
  58.               <el-table-column prop="xuhao" label="序号"></el-table-column>
  59.               <el-table-column prop="zyml" label="专业门类"></el-table-column>
  60.               <el-table-column prop="yjyz" label="一级专业"></el-table-column>
  61.               <el-table-column prop="ejzy" label="二级专业"></el-table-column>
  62.               <el-table-column prop="sjzy" label="三级专业"></el-table-column>
  63.               <el-table-column prop="zylb" label="专业类别"></el-table-column>
  64.               <el-table-column prop="addr" label="常住工作地"></el-table-column>
  65.               <el-table-column prop="type" label="组建方式"></el-table-column>
  66.               <el-table-column prop="number" label="可抽取人数"></el-table-column>
  67.             </el-table>
  68.           </div>
  69.           <!-- 底部按钮 -->
  70.           <div class="bottom">
  71.             <el-button plain>取消</el-button>
  72.             <el-button type="primary" @click="submit">确定</el-button>
  73.           </div>
  74.         </div>
  75.       </div>
  76.     </div>
  77.   </template>
  78.   
  79.   <script>
  80.   export default {
  81.     data() {
  82.       return {
  83.         tableData: [
  84.           //外层table的数据
  85.           {
  86.             id: "230211181611f0bWSLJG7copryh9Wv0",
  87.             xuhao: 1,
  88.             sameId: 1,
  89.             zyml: "信息安全",
  90.             yjyz: "信息安全",
  91.             ejzy: "大数据安全研究",
  92.             sjzy: "大数据管理",
  93.             zylb: "组长级",
  94.             addr: "南昌市",
  95.             type: "遴选",
  96.             number: 20,
  97.             paixu:1,
  98.             sonData: [
  99.               //把要嵌套的内层table数据，放在父级table的一个字段里
  100.               {
  101.                 cid: "fthgs",
  102.                 sameId: 1,
  103.                 name: "陈涛",
  104.                 info: "信息安全",
  105.                 sfz: "612454779799",
  106.                 phone: "134154647",
  107.                 ischecked: false,
  108.                 paixu:1,
  109.                 xuhao: 1,
  110.               },
  111.               {
  112.                 cid: "trh",
  113.                 sameId: 1,
  114.                 name: "张三",
  115.                 info: "信息安全",
  116.                 sfz: "4564648979789",
  117.                 phone: "46497987",
  118.                 ischecked: false,
  119.                 paixu:1,
  120.                 xuhao: 2,
  121.               },
  122.               {
  123.                 cid: "5823435",
  124.                 sameId: 1,
  125.                 name: "李四",
  126.                 info: "信息安全",
  127.                 sfz: "666797964665",
  128.                 phone: "4687899999999",
  129.                 ischecked: false,
  130.                 paixu:1,
  131.                 xuhao: 3,
  132.               },
  133.               {
  134.                 cid: "frgvsdfg",
  135.                 sameId: 1,
  136.                 name: "王五",
  137.                 info: "信息安全",
  138.                 sfz: "156496797",
  139.                 phone: "65444478788",
  140.                 ischecked: false,
  141.                 paixu:1,
  142.                 xuhao: 4,
  143.               },
  144.             ],
  145.           },
  146.           {
  147.             id: "230211181611f0bWSLJG7cop156454ryh9Wv0",
  148.             xuhao: 2,
  149.             sameId: 2,
  150.             zyml: "信息安全",
  151.             yjyz: "信息安全",
  152.             ejzy: "大数据安全研究",
  153.             sjzy: "大数据管理",
  154.             zylb: "组长级",
  155.             addr: "南昌市",
  156.             type: "遴选",
  157.             number: 20,
  158.             paixu:2,
  159.             sonData: [
  160.               //把要嵌套的内层table数据，放在父级table的一个字段里
  161.               {
  162.                 cid: "gdfgvdsfg",
  163.                 sameId: 2,
  164.                 name: "陈涛",
  165.                 info: "信息安全",
  166.                 sfz: "612454779799",
  167.                 phone: "134154647",
  168.                 ischecked: false,
  169.                 paixu:2,
  170.                 xuhao: 1,
  171.               },
  172.               {
  173.                 cid: "rdgrvfdsfgv",
  174.                 sameId: 2,
  175.                 name: "张三",
  176.                 info: "信息安全",
  177.                 sfz: "4564648979789",
  178.                 phone: "46497987",
  179.                 ischecked: false,
  180.                 paixu:2,
  181.                 xuhao: 2,
  182.               },
  183.               {
  184.                 cid: "gfhsd",
  185.                 sameId: 2,
  186.                 name: "李四",
  187.                 info: "信息安全",
  188.                 sfz: "666797964665",
  189.                 phone: "4687899999999",
  190.                 ischecked: false,
  191.                 paixu:2,
  192.                 xuhao: 3,
  193.               },
  194.               {
  195.                 cid: "hfdgvsd",
  196.                 sameId: 2,
  197.                 name: "王五",
  198.                 info: "信息安全",
  199.                 sfz: "156496797",
  200.                 phone: "65444478788",
  201.                 ischecked: false,
  202.                 paixu:2,
  203.                 xuhao: 4,
  204.               },
  205.             ],
  206.           },
  207.           {
  208.             id: "dasdsda14564ad9s9ad4",
  209.            xuhao: 3,
  210.             sameId: 3,
  211.             zyml: "信息安全",
  212.             yjyz: "信息安全",
  213.             ejzy: "大数据安全研究",
  214.             sjzy: "大数据管理",
  215.             zylb: "组长级",
  216.             addr: "南昌市",
  217.             type: "遴选",
  218.             number: 20,
  219.             paixu:3,
  220.             sonData: [
  221.               //把要嵌套的内层table数据，放在父级table的一个字段里
  222.               {
  223.                 cid: "fgvsdgsefvcdfxghrtf",
  224.                 sameId: 3,
  225.                 name: "陈涛",
  226.                 info: "信息安全",
  227.                 sfz: "612454779799",
  228.                 phone: "134154647",
  229.                 ischecked: false,
  230.                 paixu:3,
  231.                 xuhao: 1,
  232.               },
  233.               {
  234.                 cid: "25543274258",
  235.                 sameId: 3,
  236.                 name: "张三",
  237.                 info: "信息安全",
  238.                 sfz: "4564648979789",
  239.                 phone: "46497987",
  240.                 ischecked: false,
  241.                 paixu:3,
  242.                 xuhao: 2,
  243.               },
  244.               {
  245.                 cid: "rtfefbhdfxrtfg34 ",
  246.                 sameId: 3,
  247.                 name: "李四",
  248.                 info: "信息安全",
  249.                 sfz: "666797964665",
  250.                 phone: "4687899999999",
  251.                 ischecked: false,
  252.                 paixu:3,
  253.                 xuhao: 3,
  254.               },
  255.               {
  256.                 cid: "47527ddfxgbrf",
  257.                 sameId: 3,
  258.                 name: "王五",
  259.                 info: "信息安全",
  260.                 sfz: "156496797",
  261.                 phone: "65444478788",
  262.                 ischecked: false,
  263.                 paixu:3,
  264.                 xuhao: 4,
  265.               },
  266.             ],
  267.           },
  268.           {
  269.             id: "djaoud9q7y98ye2oh3r",
  270.            xuhao: 4,
  271.             sameId: 4,
  272.             zyml: "信息安全",
  273.             yjyz: "信息安全",
  274.             ejzy: "大数据安全研究",
  275.             sjzy: "大数据管理",
  276.             zylb: "组长级",
  277.             addr: "南昌市",
  278.             type: "遴选",
  279.             number: 20,
  280.             paixu:4,
  281.             sonData: [
  282.               //把要嵌套的内层table数据，放在父级table的一个字段里
  283.               {
  284.                 cid: "452574dgvdbvdfc",
  285.                 sameId: 4,
  286.                 name: "陈涛",
  287.                 info: "信息安全",
  288.                 sfz: "612454779799",
  289.                 phone: "134154647",
  290.                 ischecked: false,
  291.                 paixu:4,
  292.                 xuhao: 1,
  293.               },
  294.               {
  295.                 cid: "kifdhgoiuy89jkh98yugb",
  296.                 sameId: 4,
  297.                 name: "张三",
  298.                 info: "信息安全",
  299.                 sfz: "4564648979789",
  300.                 phone: "46497987",
  301.                 ischecked: false,
  302.                 paixu:4,
  303.                 xuhao: 2,
  304.               },
  305.               {
  306.                 cid: "nmkjsfhdf87ye74gfhkdvgcfyu",
  307.                 sameId: 4,
  308.                 name: "李四",
  309.                 info: "信息安全",
  310.                 sfz: "666797964665",
  311.                 phone: "4687899999999",
  312.                 ischecked: false,
  313.                 paixu:4,
  314.                 xuhao: 3,
  315.               },
  316.               {
  317.                 cid: "njuifewhdsiuy798gbug",
  318.                 sameId: 4,
  319.                 name: "王五",
  320.                 info: "信息安全",
  321.                 sfz: "156496797",
  322.                 phone: "65444478788",
  323.                 ischecked: false,
  324.                 paixu:4,
  325.                 xuhao: 4,
  326.               },
  327.             ],
  328.           },
  329.         ],
  330.         // 姓名筛选
  331.         fiterNameData: [
  332.           {
  333.             text: "陈涛",
  334.             value: "陈涛",
  335.           },
  336.           {
  337.             text: "张三",
  338.             value: "张三",
  339.           },
  340.           {
  341.             text: "李四",
  342.             value: "李四",
  343.           },
  344.           {
  345.             text: "王五",
  346.             value: "王五",
  347.           },
  348.         ],
  349.         // 身份证筛选
  350.         fiterNumberData: [
  351.           {
  352.             text: "612454779799",
  353.             value: "612454779799",
  354.           },
  355.           {
  356.             text: "4564648979789",
  357.             value: "4564648979789",
  358.           },
  359.           {
  360.             text: "666797964665",
  361.             value: "666797964665",
  362.           },
  363.           {
  364.             text: "156496797",
  365.             value: "156496797",
  366.           },
  367.         ],
  368.         // 联系电话筛选
  369.         fiterPhoneData: [
  370.           {
  371.             text: "134154647",
  372.             value: "134154647",
  373.           },
  374.           {
  375.             text: "46497987",
  376.             value: "46497987",
  377.           },
  378.           {
  379.             text: "4687899999999",
  380.             value: "4687899999999",
  381.           },
  382.           {
  383.             text: "65444478788",
  384.             value: "65444478788",
  385.           },
  386.         ],
  387.         //多选的值
  388.         father: [],
  389.         son: [],
  390.       };
  391.     },
  392.     methods: {
  393.       // 调整行样式
  394.       rowStyle({ row, rowIndex }) {
  395.         let bgcolor = {
  396.           background: "#f1f2f3",
  397.           borderBottom: "1px solid #d9d9d9",
  398.         };
  399.         return bgcolor;
  400.       },
  401.       // 过滤姓名
  402.       filterTag(value, row) {
  403.         return row.name === value;
  404.       },
  405.       // 过滤身份证
  406.       fiterNumber(value, row) {
  407.         return row.operation === value;
  408.       },
  409.       // 过滤电话号码
  410.       fiterPhone(value, row) {
  411.         return row.phone === value;
  412.       },
  413.       changeVal(val){
  414.           if(val.ischecked==true){
  415.               this.handleSelectionChange(val)
  416.           }else{
  417.               this.son.forEach((item,index)=>{
  418.                   if(val.cid==item.cid){
  419.                       this.son.splice(index,1)
  420.                       this.father.splice(index,1)
  421.                   }
  422.               })
  423.           }
  424.       },
  425.       // 单选框的选中值
  426.       handleSelectionChange(val) {
  427.         let that=this
  428.         this.tableData.forEach((item) => {
  429.           if(item.sonData && val.sameId==item.sameId){
  430.               let index=that.father.findIndex((item3)=>{
  431.                   return item3.sameId==val.sameId
  432.               })
  433.               if(index>=0){
  434.                   that.father.splice(index,1)
  435.               }
  436.               that.father.push(item)
  437.               item.sonData.forEach((item2)=>{
  438.                  if(item2.cid!=val.cid){
  439.                   item2.ischecked = false;
  440.                  }else if(item2.cid==val.cid){
  441.                   let index2=that.son.findIndex((item4)=>{
  442.                       return item4.sameId==item2.sameId
  443.                   })
  444.                   if(index>=0){
  445.                   that.son.splice(index2,1)
  446.                   }
  447.                   that.son.push(item2)
  448.                  }
  449.               })
  450.           }
  451.         });
  452.         
  453.       },
  454.       //   点击确定按钮
  455.       submit() {
  456.           if (this.tableData.length==this.father.length && this.tableData.length==this.son.length) {
  457.               this.$message({
  458.               message: "恭喜你，提交成功",
  459.               type: "success",
  460.               });
  461.           } else {
  462.               this.$message({
  463.               message: "您还没有完成选中信息哦!!!",
  464.               type: "warning",
  465.               });
  466.           }
  467.       },
  468.    
  469.     },
  470.     mounted() {
  471.       this.$nextTick(() => {
  472.          this.$refs.isExpand.toggleRowExpansion(this.tableData[0], true);
  473.       });
  474.     },
  475.   };
  476.   </script>
  477.   <style lang="scss">
  478.   @import "../style/util.scss";
  479.   .el-table-filter {
  480.     // background-color: pink;
  481.     width: vw(180) !important;
  482.     height: vh(160) !important;
  483.     padding-right: vw(5);
  484.     // left: vw(720) !important;
  485.     .el-checkbox__inner {
  486.       width: vw(20);
  487.       height: vh(20);
  488.     }
  489.     .el-checkbox__input.is-checked .el-checkbox__inner::after {
  490.       width: vw(8);
  491.       height: vh(8);
  492.       left: vw(4);
  493.       top: vh(2);
  494.     }
  495.     .el-table-filter__wrap {
  496.       max-height: vh(100);
  497.       padding: vw(10);
  498.     }
  499.     .el-table-filter__bottom {
  500.       // padding: vw(5)
  501.     }
  502.     .el-table-filter__bottom button {
  503.       font-size: vw(18);
  504.       padding: vw(10);
  505.     }
  506.     .el-table-filter__checkbox-group label.el-checkbox {
  507.       height: vh(30);
  508.     }
  509.   }
  510.   </style>
  511.   <style lang="scss" scoped>
  512.   @import "../style/util.scss";
  513.   .bg {
  514.     width: 100vw;
  515.     height: 100vh;
  516.     // background: rgba(0, 0, 0, 0.3);
  517.     position: relative;
  518.     user-select: none;
  519.     .lxbox {
  520.       // width: vw(1471);
  521.       width: 100%;
  522.       height: vh(792);
  523.       height: 100vh;
  524.       box-sizing: border-box;
  525.       background: #ffffff;
  526.       border-radius: 0px 0 vw(4) vw(4);
  527.       position: absolute;
  528.       // top: 50%;
  529.       left: 50%;
  530.       transform: translateX(-50%);
  531.   
  532.       .top {
  533.         width: vw(1471);
  534.         width: 100%;
  535.         height: vh(55);
  536.         background: #fff;
  537.         display: flex;
  538.         justify-content: space-between;
  539.         padding: vh(12) vw(24);
  540.         box-sizing: border-box;
  541.         border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  542.   
  543.         .title {
  544.           font-family: "PingFangSC-Medium";
  545.           font-size: vw(16);
  546.           color: rgba(0, 0, 0, 0.85);
  547.           line-height: vh(24);
  548.           font-weight: 600;
  549.         }
  550.   
  551.         .img {
  552.           width: vw(24);
  553.           height: vh(24);
  554.           background: url("../assets/close.png") no-repeat;
  555.           background-size: contain;
  556.         }
  557.       }
  558.   
  559.       .lvtables {
  560.         width: vw(1471);
  561.         width: 100%;
  562.         height: vh(690);
  563.         height: vh(900);
  564.         overflow: auto;
  565.         padding: 0 vw(24);
  566.         box-sizing: border-box;
  567.         &::-webkit-scrollbar {
  568.                                   width: 0;
  569.                               }
  570.       }
  571.   
  572.       .bottom {
  573.         width: vw(1471);
  574.         width: 100%;
  575.         position: absolute;
  576.         bottom: 0;
  577.         height: vh(55);
  578.         background: #fff;
  579.         border-top: 1px solid rgba(0, 0, 0, 0.09);
  580.         display: flex;
  581.         padding-right: vw(32);
  582.         box-sizing: border-box;
  583.         justify-content: flex-end;
  584.         align-items: center;
  585.       }
  586.     }
  587.   
  588.     >>> .el-button {
  589.       width: vw(88);
  590.       height: vh(32);
  591.       font-size: vw(16);
  592.     }
  593.   
  594.     >>> .el-button--default {
  595.       margin-right: vw(14);
  596.       color: rgba(0, 0, 0, 0.65);
  597.       font-weight: 400;
  598.       height: vh(38);
  599.       line-height: vh(35);
  600.     }
  601.   
  602.     >>> .el-button--primary {
  603.       font-weight: 400;
  604.       height: vh(38);
  605.       line-height: vh(35);
  606.     }
  607.   
  608.     >>> .el-checkbox__inner {
  609.       width: vw(22);
  610.       height: vh(22);
  611.     }
  612.   
  613.     >>> .el-checkbox__inner::after {
  614.       width: vw(10);
  615.       height: vh(10);
  616.       border: vw(2) solid #fff;
  617.       border-left: 0;
  618.       border-top: 0;
  619.       left: vw(4);
  620.       top: vh(0);
  621.     }
  622.   
  623.     >>> .el-checkbox__input.is-checked .el-checkbox__inner::after {
  624.       transform: rotate(40deg) scaleY(1.2);
  625.     }
  626.   
  627.     >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  628.       transform: scaleY(0.5);
  629.       top: 45%;
  630.       border: 1px solid #fff;
  631.     }
  632.   
  633.     >>> .el-table .cell {
  634.       line-height: vh(48) !important;
  635.       text-align: center !important;
  636.     }
  637.   
  638.     >>> .el-table__expand-icon {
  639.       -webkit-transform: rotate(0deg);
  640.       transform: rotate(0deg);
  641.       margin-right: vw(20);
  642.       position: absolute;
  643.       left: 34%;
  644.       top: 34%;
  645.       user-select: none;
  646.       color: rgb(175, 175, 175);
  647.     }
  648.   
  649.     >>> .el-table__expand-icon .el-icon-arrow-right {
  650.       font-weight: bold;
  651.     }
  652.   
  653.     >>> .el-table__expand-icon .el-icon-arrow-right::before {
  654.       content: "\e6d9";
  655.       border: 1px solid rgb(175, 175, 175);
  656.       padding: vw(3);
  657.       font-size: vw(10);
  658.     }
  659.   
  660.     >>> .el-table__expand-icon--expanded .el-icon-arrow-right::before {
  661.       content: "\e6d8";
  662.       font-weight: bold;
  663.       padding: vw(3);
  664.       font-size: vw(10);
  665.     }
  666.   }
  667.   >>> .el-table-filter {
  668.     width: vw(500) !important;
  669.     height: vh(200) !important;
  670.   }
  671.   >>> .el-table thead {
  672.     font-family: "PingFangSC-Medium";
  673.     font-size: vw(16);
  674.     color: #333333;
  675.     letter-spacing: 0;
  676.     font-weight: 500;
  677.   }
  678.   >>> .el-table__empty-block {
  679.     min-height: vh(35);
  680.     line-height: vh(35);
  681.   }
  682.   >>> .el-table__header {
  683.     .el-checkbox {
  684.       display: none;
  685.     }
  686.   
  687.   }
  688.   >>>.el-table td.el-table__cell div{
  689.       font-family: 'PingFangSC-Regular';
  690.       font-size: vw(16);
  691.       color: #333333;
  692.       line-height: vh(36);
  693.     }
  694.     >>>.el-table__column-filter-trigger i{
  695.       transform: scale(1.3);
  696.       margin-left: vw(5);
  697.       background: #FFFFFF;
  698.       border: 1px solid rgba(230,230,230,1);
  699.     }
  700.     >>>.el-icon-arrow-down:before{
  701.       content: "\e790" !important;
  702.     }
  703.     >>>.el-table__body-wrapper {
  704.       &::-webkit-scrollbar {
  705.               // width: 0 !important;
  706.             }
  707.     }
  708.   </style>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/279887
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号