vue+iview動態(tài)渲染表格詳解
更新時間：2019年03月19日 10:59:07 作者：失眠的咕嚕
這篇文章主要為大家詳細介紹了vue+iview動態(tài)渲染表格的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue+iview 動態(tài)渲染表格(iview插件table)，供大家參考，具體內容如下
效果圖
（表格頭部和表格主體都是動態(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)絡訪問，渲染類別列表
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)絡訪問失敗');
});
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題
今天小編就為大家分享一篇解決Vue.js父組件$on無法監(jiān)聽子組件$emit觸發(fā)事件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在Vue項目中,大圖片和多數(shù)據(jù)Excel等大文件的上傳是一個非常常見的需求，本文主要介紹了vue+ts大文件切片上傳，具有一定的參考價值，感興趣的可以了解一下2024-01-01
Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件詳解
這篇文章主要介紹了Vuex數(shù)據(jù)持久化的兩種方式:手動存儲和vuex-persistedstate插件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue頁面設置滾動失敗的完美解決方案(scrollTop一直為0)
這篇文章主要介紹了vue頁面設置滾動失敗的解決方案(scrollTop一直為0),本文通過場景分析實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過案例給大家簡單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧2018-11-11
這篇文章主要介紹了vue 導航錨點_點擊平滑滾動,導航欄對應變化詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue scroll滾動判斷的實現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)
這篇文章主要介紹了vue scroll滾動判斷的實現(xiàn)(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
本篇文章主要介紹了vue-router history模式下的微信分享小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue項目npm?run?build打包dist文件及打包后空白解決辦法
npm run build 這個命令會執(zhí)行Vue CLI中預定義的打包配置,并將打包后的文件存放在"dist"文件夾中,這篇文章主要給大家介紹了關于vue項目npm?run?build打包dist文件及打包后空白的解決辦法,需要的朋友可以參考下2023-10-10
vue-router是Vue.js官方提供的一套專用的路由工具庫。這篇文章主要介紹了使用vue-router完成簡單導航功能,需要的朋友可以參考下2018-06-06