餓了么的table組件功能很強大，對于項目中的各種表格基本夠用，但是……個人對于它以列為單位的操作不習慣 =。=所以改成了另一種方式（我不會告訴你其實本質沒變）。
項目中表格較多，所以復用性最重要
步驟一
先來個基本的表格展示
官例的tableData
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.vue
<template> <el-table :data="tableData" border> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table></template>
步驟二
簡化一下表格：
//table.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: 'table', data(){ return{ tableData:[...], tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } }}</script>步驟三
復用table.vue就是――――給它數據的同時告訴它我的字段名唄
新建一個父組件sl_table.vue
//sl_table.vue<template> <sl-table :tableData="tableData" :tableKey="tableKey"></sl-table></template><script>import Table from '@/components/table'export default{ name: 'sl-table', data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期' },{ name: '姓名', value: 'name' },{ name: '地址', value: 'address' }] } }, components: { 'sl-table': Table }}</script>table.vue就更簡單了
//table.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: 'table', data(){ return{ } }, props:['tableData','tableKey'],}</script>步驟四
可以根據需求修改table的形式
列寬度
這個較為簡單，可以直接加個屬性
//sl_table.vue... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', width: 80 },{ name: '姓名', value: 'name', width: 80 },{ name: '地址', value: 'address' }] } },...table.vue
//table.vue...<el-table-column v-for="(item,key) in tableKey" :key="key":prop="item.value":label="item.name":width="item.width"></el-table-column>...
自定義模板列
如果我們需要告訴組件哪個是自定義的列，所以添加一個屬性operate
table.vue
<el-table-column v-for="(item,key) in tableKey" v-if="!item.operate":key="key":prop="item.value":label="item.name":width="item.width"></el-table-column><!-- 自定義 --><el-table-column v-else> <template scope="scope"> <slot :name="item.value" :$index="scope.$index" :row="scope.row"></slot> </template></el-table-column>//sl_table.vue<sl-table :tableData="tableData" :tableKey="tableKey"> <template slot="date" scope="scope"> <span>{{ scope.row.date | DateFilter }}</span> </template></sl-table>... data(){ return { tableData: [...] tableKey: [{ name: 'date', value: '日期', operate: true },{ name: '姓名', value: 'name', operate: false },{ name: '地址', value: 'address', operate: false }] } }, filters: { DateFilter(){...} }...表格展開行
類似寬度，只要sl_table.vue傳入一個isExpand的屬性。這里加個每次只能展開一行的效果：
//sl_table.vue<sl-table :tableData="tableData" :tableKey="tableKey" :isExpand="true" :isExpandOnly="true"> <template slot="expand" scope="scope"> {{...expand something}} </template> ...</sl-table>table.vue
//table.vue<el-table :data="tableData" border @expand="handleExpand" ref="raw_table"> <el-table-column v-if="isExpand" type="expand"> <template scope="scope"> <slot name="expand" :$index="scope.$index" :row="scope.row"></slot> </template> </el-table-column></el-table>...props: ['tableData','tableKey','isExpand','isExpandOnly'],methods: { handleExpand(row,is_expand){ if(this.isExpand && this.isExpandOnly){ this.$refs.raw_table.store.states.expandRows = expanded ? [row] : [] } }}其他的（排序、多選）操作也是類似添加。。。多不贅述。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
