在使用element-ui的時候荞膘，雖然說element官方的el-table組件已經(jīng)相當好了面氓，但針對的是所以群體绝骚，如果我們在寫后臺系統(tǒng)的時候希望更多的去封裝已減少重復勞動蜜葱。這次趁自己在寫后臺系統(tǒng)的時間來具體記錄下如何去封裝的田柔。
分析element-ui官方的el-table組件
表格屬性
首先需要分析出那些屬性是項目中必須每次都需要的俐巴，這種屬性適合默認值，如果不是必須的但又用到了的可以作為可配置項硬爆。根據(jù)自己的項目其實最常用的屬性data欣舵、stripe，其它的屬性大家可以根據(jù)自己的項目視具體情況而定缀磕。
表格方法
方法中在目前的項目中是沒有使用到的缘圈，但是有一個應該是會有人用到的，sort-change
表格項的屬性
表格的每一項的屬性應該是最多的了袜蚕，畢竟需要配置的也就是表格的每一項了糟把，主要有l(wèi)abel、prop牲剃、width遣疯、fixed、sortable凿傅、formatter缠犀、show-overflow-tooltip，其實這里根據(jù)自己的項目還需要加一個是否為圖片的屬性聪舒，畢竟表格里面顯示圖片還是顯示不下的需要使用其他組件來顯示圖片辨液，暫定屬性為isImg。
表格操作按鈕
通常后臺系統(tǒng)最后一列都需要一個操作箱残，畢竟有很多數(shù)據(jù)時需要人工進行操作的室梅，所以需要添加一些操作的按鈕來對某一行數(shù)據(jù)進行操作。
定義想象的數(shù)據(jù)模型
根據(jù)上面的分享接下來我們先把需要的數(shù)據(jù)或則是配置項定義下來疚宇，這樣后面定義組件的時候就可以根據(jù)定義的數(shù)據(jù)或則配置項來生成表格的內(nèi)容。
表格數(shù)據(jù)的屬性
根據(jù)上面的分享表格數(shù)據(jù)的屬性就兩個data和stripe赏殃，這里需要外加一個loading敷待，所以結(jié)構(gòu)就像下面這樣的：
<template>
<div class="home">
test
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
table: {
stripe: false, //是否為斑馬紋
loading: false, // 數(shù)據(jù)加載loading
}
};
},
mounted() {}
};
</script>
目前沒有數(shù)據(jù)所以可以先關閉loading和stripe
接下來就是最重要的數(shù)據(jù)了，目前沒有接口所以這里使用自己手動添加數(shù)據(jù)仁热，也就是在table對象中添加data這樣一個數(shù)組來保存表格的數(shù)據(jù)榜揖，如下：
data() {
return {
table: {
stripe: false, //是否為斑馬紋
loading: false, // 數(shù)據(jù)加載loading
data: [
{
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 弄"
}
]
}
};
}
這樣表格的屬性也就差不多了勾哩。
表格的方法
表格的方法也就一個就是排序的，因項目中沒有用到所以這里只是提供一個思路举哟，具體實現(xiàn)的細節(jié)大家可以自己去補充思劳，在table對象里面新添加一個event配置項如下：
event: {
sortEvent: this.tableSort
}
這里的tableSort就不具體寫了，大家可以自己參考element-ui官方來寫這個排序的查詢妨猩。
表格每一項數(shù)據(jù)的屬性
這個也是重點需要配置的潜叛，先定義幾組數(shù)據(jù)模型，也就是在table對象中添加一個數(shù)組header用于表格的生成壶硅，如下：
header: [
{
prop: "selection",
width: "55"
},
{
prop: "date",
label: "日期11"
},
{
prop: "date",
label: "日期11",
width: "180",
formatter: "",
tooltip: false,
sortable:false,
fixed: "right"
},
{
prop: "date",
label: "日期11",
width: "180",
formatter: "",
tooltip: false,
sortable:false,
isImg:false,
fixed: "right"
},
{
prop: "options",
label: "操作",
width: "180",
fixed: "right"
}
]
數(shù)組中第一個和最后一個位置最好不要動威兜，第一個是多選操作，最后一個是操作欄
表格數(shù)據(jù)的操作按鈕
有了操作欄那么就需要有操作的按鈕庐椒，先定義一個試試看椒舵，如下：
options: [
{
type: "success",
label: "通過",
event: this.submitBtn,
isShow: item => {
return item.status == 0 ? false : true;
}
}
]
isShow為什么時候顯示該按鈕，這里有一個回調(diào)來配置约谈，需要返回一個布爾值
表格組件的定義
表格的基礎數(shù)據(jù)定義好了就可以開始定義表格組件了笔宿，新建一個table組件，然后添加如下代碼：
<template>
<el-table :data="table.data" v-loading="table.loading" :stripe="table.stripe">
</el-table>
</template>
<script>
export default {
props: {
table: Object
}
};
</script>
這時候是看不到任何效果的棱诱，所以先在頁面中引入該組件(上面生成數(shù)據(jù)的頁面中)泼橘，接下來就是生成表格的內(nèi)容了。
生成多選操作
多選操作在配置的時候就是prop的值為selection军俊，所以直接在循環(huán)中判斷即可侥加，如下：
<template v-for="item in table.header">
<el-table-column type="selection" :width="item.width" v-if="item.prop == 'selection'"></el-table-column>
</template>
效果如下：
生成列表項
列表項就是具體的表格項屬性了，配置好基本上表格的數(shù)據(jù)也就能看到了粪躬，這里就不單個去說了担败，直接看最終代碼吧：
<template>
<el-table :data="table.data" v-loading="table.loading" :stripe="table.stripe">
<template v-for="item in table.header">
<el-table-column type="selection" :width="item.width" v-if="item.prop == 'selection'"></el-table-column>
<template v-else-if="item.prop == 'options'">
<template v-if="table.options.length">
<el-table-column :label="item.label" :width="item.width" :fixed="item.fixed">
<template slot-scope="scope">
<template v-for="btn in table.options">
<el-button
:type="btn.type"
v-if="btn.isShow ? btn.isShow(scope.row) : true"
@click="btn.event(scope.row)"
>{{btn.label}}</el-button>
</template>
</template>
</el-table-column>
</template>
</template>
<template v-else>
<template v-if="item.isImg">
<el-table-column :prop="item.prop" :label="item.label" :width="item.width">
<template slot-scope="scope">
<el-popover placement="left" trigger="click">
<div>
<el-image
style="width: 300px; height: auto;"
:src="scope.row[item.prop]"
fit="contain"
slot="reference"
></el-image>
</div>
<el-image
style="width: 100px;height: 100px;"
:src="scope.row[item.prop]"
fit="contain"
slot="reference"
></el-image>
</el-popover>
</template>
</el-table-column>
</template>
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
:formatter="item.formatter?item.formatter:null"
:show-overflow-tooltip="item.tooltip?item.tooltip:false"
:sortable="item.sortable?item.sortable:false"
v-else
></el-table-column>
</template>
</template>
</el-table>
</template>
<script>
export default {
props: {
table: Object
}
};
</script>
修改初始數(shù)據(jù)
這個時候基本封裝好了，對于剛開始的初始數(shù)據(jù)做如下修改即可：
<template>
<div class="home">
<my-table :table="table"></my-table>
</div>
</template>
<script>
import myTable from "@/components/Table";
export default {
name: "home",
components: {
"my-table": myTable
},
data() {
return {
table: {
stripe: false, //是否為斑馬紋
loading: false, // 數(shù)據(jù)加載loading
data: [
{
date: "2016-05-02",
name: "王小虎",
img:
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
address: "上海市普陀區(qū)金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
img:
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
address: "上海市普陀區(qū)金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
img:
"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
address: "上海市普陀區(qū)金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
img:
"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
address: "上海市普陀區(qū)金沙江路 1516 弄"
}
],
event: {
sortEvent: this.tableSort
},
header: [
{
prop: "selection",
width: "55"
},
{
prop: "date",
label: "日期11",
width: "180",
formatter: ""
},
{
prop: "name",
label: "名稱",
tooltip: false,
sortable: false
},
{
prop: "img",
label: "頭像",
width: "180",
isImg: true
},
{
prop: "address",
label: "地址",
width: "180",
tooltip: true
},
{
prop: "options",
label: "操作",
width: "200",
fixed: "right"
}
],
options: [
{
type: "success",
label: "通過",
event: this.checkPass,
isShow: item => {
return item.status == 0 ? false : true;
}
},
{
type: "danger",
label: "不通過",
event: this.checkNoPass,
isShow: item => {
return item.status == 1 ? false : true;
}
}
]
}
};
},
methods: {
tableSort(val) {
console.log(val);
},
checkPass(val) {
console.log(val);
},
checkNoPass(val) {
console.log(val);
}
}
};
</script>
效果如下：
