console
var Main = {
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: "BgDpYVC9JKna_bb2beL_11",
column1: "001",
column2: "上海路力通公司",
column3: "部门",
column4: "",
column5: "",
column6: "公司"
},
{
id: "AG6pBn5XFPSJVqclbhdCqq",
column1: "001",
column2: "上海路力通公司",
column3: "部门",
column4: "",
column5: "",
column6: "公司"
}
])
}, 1000);
}
},
data () {
return {
tableData: [
{
id: "BgDpYVC9JKna_bb2beL_nn",
column1: "001",
column2: "上海路力通公司",
column3: "部门",
column4: "",
column5: "",
column6: "公司",
hasChildren: true
},
{
id: "AG6pBn5XFPSJVqclbhdCZj",
column1: "002",
column2: "上海路力通公司",
column3: "部门",
column4: "",
column5: "",
column6: "公司",
hasChildren: true
}
],
columns: [
{
id:"Dcd44veeNJory8EIjfm7Yr",
code:"column1",
title:"组织编码",
},
{
code: "column2",
id: "ATqQt6fF9AFbKoNRZ4uCMc",
title: "组织名称",
},
{
code: "column3",
id: "CJgo1Fqk1EeqjW9S5dQM84",
title: "组织层级",
},
{
code: "column4",
id: "A-3yRAjTVPNp1yqRT6GDw2",
title: "组织单位负责职位",
},
{
code: "column5",
id: "C8JRIyYMREnLpkc2eC6lia",
title: "组织单位负责人id",
}
],
};
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.8.2/lib/index.js"></script>
<div id="app">
<template>
<el-table border stripe :data="tableData" row-key="id" lazy :load="load" height="200">
<el-table-column v-for="column in columns" :key="column.id" :label="column.title">
<template slot-scope="scope">{{scope.row[column.code]}}</template>
</el-table-column>
</el-table>
</template>
</div>
@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");