1. Router->index.js sets the path/table, pointing to table.vue
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
]
const router = new VueRouter({
routes:[
// 学习vuex, 多定义一个路由
{
path:'/',
component:() => import('../views/Parent.vue'),
// 重定向
redirect:'/table'
},
{
path:'/home/:id',
// 动态路由传参,根据name指定,需要多配置一个name
name:'home',
component:() => import('../views/Home.vue'),
Children:[{
path:'/child',
component:() => import('../views/Child.vue')
}]
},
{
// elementUI 之 layout
path:'/layout',
component:() => import('../views/elements/layout.vue')
},
{
// elementUI 之 pop
path:'/pop',
component:() => import('../views/elements/pop.vue')
},
{
// elementUI 之 pop
path:'/table',
component:() => import('../views/elements/table.vue')
},
]
})
export default router
2. views->elements->table.js
data: json data
prop: the key of the key-value pair
<template>
<div>
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
<style lang="scss" scoped></style>
slot slot realizes custom column
for encapsulates a basic table component
<template>
<div>
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 用for语句进行渲染 -->
<el-table :data="tableData">
<el-table-column v-for="(val, key) in tableLable" :key="key" :prop="key" :label="val"></el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableLable:{
date:'日期',
name:'姓名',
address:'地址'
}
}
}
}
</script>
<style lang="scss" scoped></style>