vue+iview動態(tài)渲染表格詳解
更新時間:2019年03月19日 10:59:07 作者:失眠的咕嚕
這篇文章主要為大家詳細(xì)介紹了vue+iview動態(tài)渲染表格的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue+iview 動態(tài)渲染表格(iview插件table),供大家參考,具體內(nèi)容如下
效果圖
(表格頭部和表格主體都是動態(tài)渲染)

重要代碼
<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 () {
// 進行網(wǎng)絡(luò)訪問,渲染類別列表
let that = this;
aiteuserlist().then(function (res) {
// 后臺返回數(shù)據(jù)
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('網(wǎng)絡(luò)訪問失敗');
});
}
</script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用element ui中el-table-column進行自定義校驗
這篇文章主要介紹了使用element ui中el-table-column進行自定義校驗方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動態(tài)添加option里的內(nèi)容操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vant中List組件immediate-check=false無效的解決
這篇文章主要介紹了Vant中List組件immediate-check=false無效的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01
vue3和vue2掛載實例到全局(自定義消息提示框組件方式)
這篇文章主要介紹了vue3和vue2掛載實例到全局(自定義消息提示框組件方式),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
webpack+vue.js構(gòu)建前端工程化的詳細(xì)教程
這篇文章主要介紹了webpack+vue.js構(gòu)建前端工程化的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05

