<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layui樹形表格2.x演示</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<body>
<div id="app">
<template>
<el-table :data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
>
<el-table-column
v-for="col in cols"
:prop="col.prop" :label="col.label" :width="col.width" >
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
var Main = {
data() {
return {
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小',
address: '上海市普陀區金沙江路 19 弄',
children: [{
id: 33,
date: '2016-05啥頂頂頂頂頂頂頂頂頂頂-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
id: 34,
date: '2016阿打算的撒大大大叔-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄',
children: [{
id: 35,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
id: 36,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}]
}]
}]
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄'
}],
cols: [
{prop: 'id', label: 'id'},
{prop: 'date', label: '日期'},
{prop: 'name', label: '姓名'},
{prop: 'address', label: '地址',width:"800px"},
{prop: 'date', label: '日期'},
{prop: 'name', label: '姓名'},
{prop: 'address', label: '地址'},
{prop: 'date', label: '日期'},
{prop: 'name', label: '姓名'},
{prop: 'address', label: '地址'},
{prop: 'date', label: '日期'},
{prop: 'name', label: '姓名'},
{prop: 'address', label: '地址'},
{prop: 'date', label: '日期'},
{prop: 'name', label: '姓名'},
{prop: 'address', label: '地址'},
]
}
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
}
])
}, 1000)
}
},
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>
</html>
