先看一下element官方demo
<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>
<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>
在网上看见大神整理的插件,结合自己用的时候遇到的坑整理一下。
首先创建vue的table组件,mytable.vue
<template>
<el-table :data="tableData" border>
<el-table-column v-for="(item,key) in tableKey"
:key="key"
:prop="item.value"
:label="item.name"></el-table-column>
</el-table>
</template>
<script>
export default{
name: 'mytable',
data(){
return{
}
},
props:['tableData','tableKey'],
}
</script>
再页面中调用此组件,可以在main里注册全局组件,也可以注册页面的组件,我这里是在页面中注册组件
页面如下:
<template>
<sl-table :tableData="tableData" :tableKey="tableKey"></sl-table>
</template>
<script>
//引用table组件
import Table from '@/components/mytable';
export default {
data () {
return {
//配置table数据
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 弄'
}],
//配置table表头
tableKey: [{
name: '日期',
value: 'date'
},{
name: '姓名',
value: 'name'
},{
name: '地址',
value: 'address'
}]
}
},
//注册table组件
components: {
'sl-table': Table
}
}
</script>
其他功能可以查看element官方demo