elementui表格⽗⼦表_elementUI中Table表格问题的解决⽅法这篇⽂章主要为⼤家详细介绍了elementUI中Table表格问题的解决⽅法，具有⼀定的参考价值，可以⽤来参考⼀下。
感兴趣的⼩伙伴，下⾯⼀起跟随512笔记的⼩编两巴掌来看看吧！
前⾔
element ui是⼀个⾮常不错的vue的UI框架，element对table进⾏了封装，简化了vue对表格的渲染。
在开发vue框架项⽬时，引⼊element插件，使⽤table表格组件时，遇到了⼀些问题，以下列出以供参考。
1.表格样式问题：
【图⽚暂缺】
混乱样式.png
【图⽚暂缺】
正常样式.png
如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页⾯，然后再回到之前的导航页⾯，表格table的样式就会混乱，随便点击当前页⾯或刷新亦或拉伸页⾯，样式⼜恢复正常，很奇怪的样式问题。
打开调试之后，发现table的宽度并没有按照100%来显⽰，⽽是根据表格宽度值来计算的(我这⾥是640px)，并且在table标签底下发现了colgroup和col标签，colgroup包裹着对应单元格数的col，并且col的宽度为80px，瞬间恍然⼤悟，明⽩640px是怎么得来的，这⾥⼀共有8个单元格，8*80就是640px了，那要怎么解决这个默认样式呢？
⼀、给表格添加固定宽度
代码如下：
//但是这个⽅法有个弊端，当显⽰的单元格过多时，表格下⽅会出现横向滚动条，数据不能⼀⽬了然，⽤户体验感不佳，还是宽度⾃适应⽐较好。
⼆、利⽤flex的特性
代码如下：
// 在项⽬中新建⼀个公共css⽂件，这样可以适⽤于所有表格table
//common.css
table,tbody,thead {
width: 100% !important;
}
colgroup {
position: absolute;
width: 100% !important;
display: flex;
}
col {
flex: 1;
text-align: center;
//在main.js中引⼊即可，table⾥⾯的单元格不⽤设置宽度属性，这⾥就可实现⾃适应。
2.table表格数据问题
table显⽰的数据并不是⼀成不变的，这⾥传⼊table的data需要有实时监控的功能，其中⼀个数据的改变就要及时显⽰，这⾥我⽤计算属性computed来进⾏监控。有时候后台返回的状态数据是0,1等等，我们也可以在⾥⾯进⾏判断渲染。element表格横向滚动条
代码如下：
//vue⽂件
//这⾥的dataList就是computed⾥⾯的dataList
export default {
name: "basetable",
data(){
return{
tableData:[],
}
}，
computed: {
dataList() {
//这⾥的 this.tableData是请求接⼝得到的数据
let liArr = this.tableData;
if(liArr .length>0){
for (var i = 0; i < liArr.length; i++) {
if (liArr[i].status == 0) {
liArr[i].status = "启⽤";
} else if (liArr[i].status == 1) {
liArr[i].status = "停⽤";
}
if (liArr[i].line == 0) {
liArr[i].line = "离线";
} else if (liArr[i].line == 1) {
liArr[i].line = "在线";
}
}
return liArr;
}
},
}
3.table表格的排序、筛选
代码如下：
//有时候需要对表格进⾏排序或者筛选，查看或对⽐需要的数据，这⾥就要⽤到sortable属性、filters属性、filter-change⽅法、sort-change⽅法。
//vue⽂件
// 将filter-change⽅法、sort-change⽅法放在el-table⾥⾯
//列中设置filters属性即可开启该列的筛选，filter-multiple是否多选
prop="status" column-key="status" label="启⽤状态" align="center" :filters="[{ text: '启⽤', value: '启⽤' }, { text: '停⽤', value: '停⽤' }]" filter-placement="bottom" :filter-multiple="ismultiple" >
{{ w.status }}
{{ w.status }}
//在列中设置sortable属性即可实现以该列为基准的排序
export default {
name: "basetable",
data(){
return{
tableData:[],
ismultiple：false
}
}，
methods:{
//过滤⽅法
handleFilterChange(filters) {
//从filters获取需要的参数
},
//排序⽅法
handleSortChange(sorts){
//从sorts获取需要的参数
}
}
}
/
/其他table的属性和⽅法可根据实际情况对应地去使⽤，⽤法⼤多是⼤同⼩异的，可以去官⽹查看⽂档喔
今天的⼼得就到这⼉了，希望可以帮助到有需要的⼩伙伴⼉O(∩_∩)O
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对512笔记的⽀持。
注：关于elementUI中Table表格问题的解决⽅法的内容就先介绍到这⾥，更多相关⽂章的可以留意512笔记的其他信息。
关键词：vue.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。