1. 问题
点击来回切换时,由于表格列数不一样,会出现抖动的情况
2. 源代码
<template>
<div class="check-list">
<section class="fbetween">
<div>
<el-radio-group v-model="type" @change="(value)=>{ handleSearch() }">
<el-radio-button :label="0">审核中</el-radio-button>
<el-radio-button :label="2">审核失败</el-radio-button>
</el-radio-group>
</div>
</section>
<!-- 表格 -->
<div class="option-table mgt_20" v-loading="loading">
<el-table :data="tableData" border @selection-change="tableSelect" ref="i-table">
<el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column v-for="item in column" :key="item.id" align="center" :prop="item.prop" :label="item.label" :min-width="item.width" show-overflow-tooltip>
<template slot-scope="{ row }">
<template v-if="item.prop == 'businessLicenseUrl'">
<div class="license-box fcc">
<el-image class="img" :src="row[item.prop] || ''" :preview-src-list="[row[item.prop]]"></el-image>
<div class="pre-icon pointer">
<i class="el-icon-zoom-in icon"></i>
</div>
</div>
</template>
<template v-else-if="item.prop == 'auditStatus'">
<span>{{auditStatusList[row[item.prop]]}}</span>
</template>
<span v-else>{{row[item.prop] || '-'}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" fixed="right" width="220">
<template slot-scope="{row}">
<el-button type="text">查看详情</el-button>
<el-button type="text">通过</el-button>
<el-button type="text" class="rejectBtn">拒绝</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
components: { InsDetail, RejectDialog, Pagination },
data() {
return {
type: 0,
tableData: [],
loading: false,
selectedIds: [],
}
},
computed: {
column() {
const res = [
{ id: 1, label: '机构ID', prop: 'id', width: '120', type: [0, 2] },
{ id: 2, label: '机构名称', prop: 'name', width: '120', type: [0, 2] },
{ id: 3, label: '营业执照', prop: 'businessLicenseUrl', width: '150', type: [0, 2] },
{ id: 4, label: '联系人', prop: 'userName', width: '120', type: [0, 2] },
{ id: 5, label: '联系电话', prop: 'userPhone', width: '200', type: [0, 2] },
{ id: 6, label: '联系人邮箱', prop: 'userEmail', width: '200', type: [0, 2] },
{ id: 7, label: '行业技术领域', prop: 'domainField', width: '150', type: [0, 2] },
{ id: 8, label: '提交入驻申请时间', prop: 'createTime', width: '200', type: [0, 2] },
{ id: 9, label: '审核状态', prop: 'auditStatus', width: '150', type: [0, 2] },
{ id: 10, label: '审核失败回复', prop: 'remark', width: '150', type: [2] },
]
return res.filter(item => item.type.includes(this.type));
}
},
mounted() {
this.getData();
},
methods: {
async getData() {
//通过接口获取表格数据
}
}
3.解决方法
//解决表格抖动问题
beforeUpdate() {
this.$nextTick(() => {
this.$refs['i-table'].doLayout()
})
},