不是所有的故事都能成为你的眼睛里的色彩,因为岁月会淡化你的颜色。当你的人生路走得不平顺的时候,不要忘记了,你只是走过这条路而已,走过以后一切只能任时光处置。
本文实例为大家分享了vue+iview 动态渲染表格(iview插件table),供大家参考,具体内容如下
效果图
(表格头部和表格主体都是动态渲染)
重要代码
<template>
<Table ref="selection" v-for="(item) in entities" :columns="item.columns" :data="item.data" :border="false" :key='item.id' ></Table>
</template>
<script>
export default {
data () {
return {
entities: []
}
},
mounted () {
// 进行网络访问,渲染类别列表
let that = this;
aiteuserlist().then(function (res) {
// 后台返回数据
if (res.data.data.status === 0) {
for (let i = 0; i < res.data.data.info.length; i++) {
var entity = {
id: -1,
columns: [
{
type: 'selection',
width: 60,
align: 'left'
},
{
title: '巴拉巴拉公司',
key: 'user_name'
}
],
data: []
};
entity.columns[1].title = res.data.data.info[i].company_name;
entity.data = res.data.data.info[i].userlist;
entity.id = res.data.data.info[i].id;
that.entities.push(entity);
}
}
}).catch(function () {
console.log('网络访问失败');
});
}
</script>
以上就是vue+iview动态渲染表格详解。我们不是“居安思危”,而是“居危思进”。更多关于vue+iview动态渲染表格详解请关注haodaima.com其它相关文章!