效果如下：
表格的操作列變成可配置項
給每個操作列按鈕添加方法，加圖標，可以根據狀態控制按鈕的顯示、隱藏
1、新建一個table.vue組件
請參考 element el-table的封裝以及使用
<template>
<div>
<el-table
:data='tableData'>
<!--多選列-->
<el-table-column
v-if='selectionShow'
type="selection"
width="50"
align="center"
highlight-current-row>
</el-table-column>
<!--自定義添加排序列-->
<el-table-column
v-if='indexShow'
align="center"
:label="indexLabel"
:width="indexWidth">
<template slot-scope="scope">
<span>{{scope.$index + 1}} </span>
</template>
</el-table-column>
<!--主要內容部分-->
<el-table-column
v-for="(item, index) in tableHead"
:header-align="item.headerAlign"
:align="item.align"
:key="index"
:fixed="item.fixed"
:width="ColumnWidth(item)"
:prop="item.prop"
:label="item.label"
:sortable="item.sortable" >
<div class="showTable" style="min-height: 20px;">
<div
:title="scope.row[item.prop]"
v-html="normalFormatter(item.prop,scope.row[item.prop],item)">{{scope.row[item.prop]}}</div>
</div>
</el-table-column>
<!--操作列-->
<el-table-column
align="center"
v-if="buttonListShow"
:fixed="addBtnList.fixed"
:label=addBtnList.label
:min-width="addBtnList.width">
<template slot-scope="scope">
<el-button
v-for="(item,index) in addBtnList.list"
:key="index"
v-show="exchangeBtn(item.showBtn,scope)"
@click="clkCall(item.methods,scope)"
type="text"
size="small" :title="item.title">
<i class="add-btn-i" :class="item.icon" style="color:#3877D6"></i>
<span style="color:#3877D6">{{item.title}}</span>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
props:{
indexShow: Boolean, // 是否顯示排序列
selectionShow: Boolean, // 是否顯示多選列
indexLabel: null, // 排序列名稱
indexWidth: null, // 排序列寬度
tableHead: Array, // 表頭數據
tableData: Array, // 表格數據
addBtnList: null, // 操作列配置項
buttonListShow: Boolean, // 是否顯示操作列
},
data(){
return{
}
},
watch: {
// 監聽表格數據
tableData: {
handler(val, oldVal) {
this.tableData= val
}
},
// 監聽表頭數據
tableHead: {
handler(val, oldVal) {
this.tableHead= val
}
}
},
mounted(){
this.initData()
},
methods:{
// 判斷操作列按鈕顯示、隱藏
exchangeBtn(itemshowBtn,scope){
if(eval(itemshowBtn)){
return true
}
},
// 操作列 按鈕方法
clkCall(methodsWords,scope) {
let el = event.currentTarget;
this.$emit('clkCallBk', methodsWords,scope,el)
// console.log(el)
},
}
}
</script>
2、使用組件
新建一個tableDemo.vue頁面
請參考 element el-table的封裝以及使用
代碼如下：
<template>
<div>
<new-table
:tableData="tableData"
:tableHead="tableHead"
:selectionShow=true
:indexShow=true
indexLabel="序號"
indexWidth="50"
:buttonListShow=true
:addBtnList="addBtnList"
@clkCallBk="listenCall">
</new-table>
</div>
</template>
<script>
export default {
data(){
return{
// 表頭數據
tableHead:[
{
width: 150,
label: '日期',
prop: 'date',
align: 'right', // 列對齊方式
headerAlign:'center', // 列頭對其方式
fixed: false, // 列是否固定
filterShow: true, // 是否開啓過濾
sortable: true, //是否開啓排序
},
{
width: 150,
label: '姓名',
prop: 'name',
align: 'left',
headerAlign:'center',
fixed: false,
filterShow: true,
sortable: true
},
{
width: 250,
label: '地址',
prop: 'address',
align: 'left',
headerAlign:'center',
fixed: false,
sortable: true
}
}
],
// 表格基礎數據
tableData:[
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄'
},
],
buttonListShow: true, // 是否顯示操作列
// 操作列數據
addBtnList: {
label: '操作',
width: 200,
list: [
{
title: '查看',
icon: 'el-icon-circle-plus-outline',
methods: 'check', // 按鈕方法
showBtn: true // 是否顯示按鈕
},
{
title: '編輯',
icon: 'el-icon-edit',
methods: 'edit',
showBtn: true
},
{
title: '刪除',
icon: 'el-icon-delete',
methods: 'del',
showBtn: 'scope.row.IsAudit==1?true:false' // 根據表格狀態顯示隱藏按鈕
}
]
}
}
},
methods:{
// 操作列按鈕方法
listenCall(methodsWords,scope,el) {
console.log('methodsWords', methodsWords,scope,el)
this[methodsWords](scope,el)
},
// 調用查看方法
check(scope,el) {
console.log(scope,el)
alert('查看')
},
// 調用編輯方法
edit(scope,el) {
console.log(scope,el)
alert('編輯')
},
// 調用刪除方法
del(scope,el) {
console.log(scope,el)
alert('刪除')
},
}
}
</script>
