vxe-table与ant(本人)常用css

（1）树形结构展开与收起

 <vxe-button status="primary" @click="openShow()">{{ showExplan ? '展开' : '收起' }}</vxe-button>

 <vxe-table 
    ref="table" 
    show-overflow 
    max-height="630px" 
    :loading="loading" 
    :data="tableData"
    :row-config="{  isHover: true }" 
    :show-header-overflow="true"
    :column-config="{ resizable: true }"
    :header-cell-style="headerCellStyle"
    :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}"
                    >

    // 展示是否展开
    openShow() {
      this.$refs.table.setAllTreeExpand(this.showExplan)
      this.showExplan = !this.showExplan
    },

（2）ant中Modal按钮居中

// 弹窗按钮居中
/deep/.ant-modal-footer{
  text-align: center!important;;
}

（3）ant中Modal 清除确认与取消按钮

 <a-modal v-drag-modal :footer="null" >

（4）vxe表头设置百分百列拖动

// 表格头部设置100%
/deep/.vxe-table--header {
  width: 100% !important;
}

/deep/.vxe-table--render-default .vxe-table--body,
.vxe-table--render-default .vxe-table--footer,
.vxe-table--render-default .vxe-table--header {
  width: 100% !important;
}

（5） vxe表头设置背景颜色

 <vxe-table 
     :header-cell-style="headerCellStyle"
>

    // 表头背景颜色
    headerCellStyle() {
        return {
            backgroundColor: 'rgb(250,250,250)',
        }
    },

（6） vxe单元格返回空值显示

  <vxe-column field="type" align="left"  width="23%" title="哟哟" :formatter="getConnect"></vxe-column>

    // 返回是否有值 
    getConnect({ cellValue }) {
        if (cellValue != null) {
            return cellValue
        } else {
            return '--'
        }
    },

（7）表格列自定义样式

<vxe-column field="name" align="left"  width="20%" title="名称" :formatter="getConnect">
  <template #default="{ row }">
    <span class="click" @click="toEncoderSetting(row)" style="color: #0a98d5; cursor: pointer">
        {{ row.name }}
   </span>
  </template>
</vxe-column>

（8）弹窗间高度设置

/deep/.ant-form-item {
    height: 60px!important;
    margin-bottom: 0px!important;
    padding-bottom: 0px !important;
}

（9） 加减号动态交互

<vxe-column align="center" width="5%">
                        <template #header><svg @click="addEmptyRow()" style="cursor: pointer;" t="1694501075071" class="icon add" viewBox="0 0 1024 1024" version="1.1" p-id="2296" width="23" height="23"><path d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z" fill="#c0c4cc" p-id="2297"></path><path d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z" fill="#c0c4cc" p-id="2298"></path></svg></template>
                        <template  #default="{ row }"><svg @click="deleteRow(row)" style="cursor: pointer;" t="1694501286895" class="icon reduce" viewBox="0 0 1024 1024" version="1.1"  p-id="5214" width="20" height="20"><path d="M512 0c-285.257143 0-512 226.742857-512 512s226.742857 512 512 512 512-226.742857 512-512-226.742857-512-512-512z m0 950.857143c-241.371429 0-438.857143-197.485714-438.857143-438.857143s197.485714-438.857143 438.857143-438.857143 438.857143 197.485714 438.857143 438.857143-197.485714 438.857143-438.857143 438.857143z" fill="#c0c4cc" p-id="5215"></path><path d="M731.428571 475.428571h-438.857142c-21.942857 0-36.571429 14.628571-36.571429 36.571429s14.628571 36.571429 36.571429 36.571429h438.857142c21.942857 0 36.571429-14.628571 36.571429-36.571429s-14.628571-36.571429-36.571429-36.571429z" fill="#c0c4cc" p-id="5216"></path></svg></template>
                    </vxe-column>

    // 向下添加一行
     addEmptyRow(row){
      this.$refs.applyTable.insertAt(row);
    },
    // 删除对应行
    deleteRow(row){
      this.$refs.applyTable.remove(row)
    }

// 加减号动态交互
.add:hover {
    path {
        fill: #1296db;
    }
}

.reduce:hover {
    path {
        fill: #ca4a39;
    }
}

（10）循环动态切换样式

  <a-col :span="9" class="day_header" v-bind:style="computedStyleOne()" >

    computedStyleOne() {
     var a=this.logData.fillingTime
     var b=this.logData.clockInTime 
              if( b <a) {
                  return {
                    // 浅红
                      backgroundColor: '#ffd7e1',
                  }
              } 
              else if(b == a){
                  return {
                    // 白色
                    backgroundColor: '#eff8ff',
                }
            } else if (b > a) {
                return {
                    // 浅黄
                    backgroundColor: '#ffedcf',
                }
            }
        },

（11）一个组价调用其他组件方法

（12）表头内边距

// 表头内边距
/deep/.vxe-table--render-default .vxe-cell{
    padding-left: 5px !important;
    padding-right: 0 !important;
}