本文介绍了一种在Vue中优化表格的方法，包括设置条件样式`column-css`和`borderstripeheight`，监听数据变化以实现动态加载，并在表格无数据时显示自定义提示。通过`@change`、`@clear`事件处理和`v-if`指令实现筛选和清空功能，同时使用`v-model`进行数据绑定。当数据为空时，动态插入无数据提示元素并调整其样式，确保页面呈现良好的用户体验。
一、添加表格内条件
header-cell-class-name="column-css" border stripe height = "552">
@change="changMethod" @clear="searchClick"
v-if="scope.$index === 0" v-model="filters.signalType">
:label="item.label" :value="item.value">
{{ scope.row.signalTypeId_CN }}
{{$t('kpmg.seeDetails')}}
二、添加表格内无数据提示
watch:{
DataSet: function (val) {
let para = document.createElement("p");
let node = document.createTextNode("暂无数据");
let element = document.getElementsByClassName('currentInfo-table')[0].getElementsByClassName('el-table__body-wrapper')[0];
para.appendChild(node);
para.style.height = "100%";
para.className = "noData";
para.style.textAlign = "center";
para.style.paddingTop = document.getElementById('toolboxcard').clientHeight / 2-250 + 'px';
if (val && val.length <= 1) {
if(!document.getElementsByClassName('currentInfo-table')[0].getElementsByClassName('noData')[0]){
element.appendChild(para);
}
} else {
if (document.getElementsByClassName('currentInfo-table')[0].getElementsByClassName('noData')[0]) {
let pare = document.getElementsByClassName('currentInfo-table')[0].getElementsByClassName('noData')[0];
element.removeChild(pare);
}
}
}
}
三、效果图如下：
扫一扫
3639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
