管理系統(tǒng)的前端項目中，表格是一個重要的功能，利用element-ui可以快速的開發(fā)。
el-table示例
<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: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
}
</script>
根據(jù)element-ui的官方demo可以快速實現(xiàn)一個表格，但是在實際開發(fā)中如果后續(xù)需求需要增加列，不僅要在數(shù)據(jù)中增加列的字段，還需要在html中增加<el-table-column></el-table-column>，維護起來不太方便。
利用v-for遍歷列
<el-table-column v-for="(col,index) in tableData" :key="index" :prop="col.prop" :label="col.label" :formatter="tableFormatter"></el-table-column>
tableData:[{
label: '姓名',
prop:'name'
},{
label: '性別',
prop: 'sex'
}]
利用v-for遍歷可以大大簡化html結(jié)構(gòu)，增加新列可以只在數(shù)據(jù)中增加，而且也不影響數(shù)據(jù)的格式化
tableFormatter(row, column, cellValue){
if (column.property === 'sex') {
return cellValue === 0 ? '男' : '女'
}else{
return cellValue
}
}
但是這種方式缺點也很明顯，formatter只能返回字符串，假如某列需要一個Switch開關(guān)或者燃盡圖遍歷則沒有辦法實現(xiàn)。
那么是否有一種既可以實現(xiàn)功能又利于維護的方式？
利用render函數(shù)和el-table的自定義列
el-table自定義列demo
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
如demo中的示例，el-table的自定義列使用scope傳遞參數(shù)，scope.row為數(shù)據(jù)，scope.$index為索引。
我們可以在列的數(shù)據(jù)中加入自定義的參數(shù)，將所有的列都視為自定義列，如果存在自定義的參數(shù)則渲染我們自定義的參數(shù)，否則讓此列展示默認的數(shù)據(jù)。
封裝的table組件
<template>
<el-table :data="data">
<el-table-column v-for="(col, index) in rowHeader" :key="index" :prop="col.prop" :label="col.label">
<template slot-scope="scope">
<ex-slot v-if="col.render" :render="col.render" :row="scope.row" :index="scope.$index" :column="col"></ex-slot>
<span v-else>
{{scope.row[col.prop]}}
</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
// 自定義內(nèi)容的組件
var exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, data) => {
const params = {
row: data.props.row,
index: data.props.index
}
if (data.props.column) params.column = data.props.column
return data.props.render(h, params)
}
}
export default {
components: {
'ex-slot': exSlot
},
props: {
// 表格數(shù)據(jù)
data: {
type: Array,
default: () => {
return []
}
},
// 表頭數(shù)據(jù)
rowHeader: {
type: Array,
default: () => {
return []
}
}
}
}
</script>
使用
<my-table :data="tableData" :rowHeader="rowHeader"></my-table>
<script>
export default{
data(){
return:{
tableData:[
{
name: '老王',
sex: 0,
age: 18,
score: 60
}
],
rowHeader:[
// 未做任何格式化處理的數(shù)據(jù)
{
prop: 'name',
label: '姓名'
},
// 格式化為字符串
{
prop: 'sex',
label: '性別',
render: (h, params) => {
return params.row.sex === 0 ? '男' : '女'
}
},
{
prop: 'age',
label: '年齡',
render: (h, params) => {
return params.row.age + '歲'
}
},
// 插入組件或標簽內(nèi)容（例：進度條組件）
{
prop: 'score',
label: '分數(shù)',
render: (h, params) => {
return h('el-progress', {
props: {
textInside: true,
strokeWidth: 18,
percentage: params.row.score
}
})
}
},
// 添加操作按鈕
{
prop: '',
label: '操作’,
render: (h, params) => {
return h('el-button', '刪除', {
prop:{
type: 'primary'
},
on:{
click: () => {
console.log('刪除')
}
}
})
}
}
]
}
}
}
</script>
封裝的table組件中可以傳入min-width,align等屬性，當然element-ui的table組件有幾時個api不可能通過我們自己二次封裝的table全部傳遞，但是大多常用的table列表都可以用這種方式實現(xiàn)，如果是特別復(fù)雜的還是建議用el-table。
