Vue iview 动态显示表头信息
Vue iview 动态显示表头信息遇到问题固定表头表示动态表头表示遇到问题大部分遇到的表头都是固定的,但如果要求后端给你什么表头信息你就显示什么呢?接下来告诉你方法!!!固定表头表示一般Vue静态页面Table为<div><Table border :columns="columns" :data="data"></Table>&...
·
遇到问题
大部分遇到的表头都是固定的,但如果要求后端给你什么表头信息你就显示什么呢?接下来告诉你方法!!!
固定表头表示
一般Vue静态页面Table为
<div>
<Table border :columns="columns" :data="data"></Table>
</div>
这里的columns指的就是表头,data指的就是表的数据信息
js里静态设置表头为
columns:[
{
type: "selection",
width: 60,
align: "center",
fixed: "left"
},{
title: "序号",
key: "number"
},{
title: "项目名称",
key: "objname"
}
]
这里面的内容我就不多说了,不会的自己实践之后再领悟领悟
给data赋值
data: [
{
number: 6
}
]
显示为(忽略表头一栏,之后会说如何在js里面添加表操作的)
动态表头表示
静态代码不变
columns清空
columns:[
]
在methods里写自己的一个自定义函数,这里的beforeMount不多做介绍,里面的代码很简单,循环定义表头,自己可以结合经验修改
beforeMount(){
this.setcolumns();
},
methods:{
setcolumns(){
var i=0;
for (i; i < 10; i++) {
this.columns.push({
title: i+'',
key: i+''
});
}
},
}
结果显示为
再添加点数据
data: [
{
1: 6
},{
2:6
},{
3:6
}
]
显示结果为
方法就是这样,但这个动态只是举了一个很简单的例子,实际要根据后端给了什么,再根据情况写
更多推荐
已为社区贡献1条内容
所有评论(0)