console
var Main = {
methods: {
load(row, treeNode, resolve) {
resolve(row.children)
}
},
data () {
return {
tableData: [
{
id: "BgDpYVC9JKna_bb2beL_nn",
column1: "001",
column2: "上海路力通公司",
column3: "部门",
column4: "",
column5: "",
column6: "公司",
children: [{
id: "qqq",
column1: "004",
column2: "苏州",
column3: "部门",
column4: "",
children: [{
id: "aaa",
column1: "004",
column2: "苏州",
column3: "部门",
column4: "",
}, {
id: "sss",
column1: "004",
column2: "苏州",
column3: "部门",
column4: "",
}]
}, {
id: "www",
column1: "004",
column2: "苏州",
column3: "部门",
column4: "",
}]
},
{
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");