(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;
}