因為在做后台管理項目的時候用到了大量的表格, 且功能大多相同,因此封裝了一些常用的功能, 方便多次復用。
組件封裝代碼:
<template> <el-table :data="tableData" size="medium" ref="multipleTable" border fit @sort-change="handleSort" @filter-change="filterHandler" @selection-change="handleSelectionChange"> <!-- 多選框 --> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column v-for="(th, key) in tableHeader" min-height="46" :key="key" :prop="th.prop" :label="th.label" :fixed="th.fixed" :sortable="th.custom?'custom':false" :filters="th.filters" :column-key="th.columnKey" :filtered-value="th.filteredValue" :filter-multiple="th.filterMultiple" :min-width="th.minWidth" align="center"> <template slot-scope="scope"> <!-- 操作按鈕 --> <div v-if="th.operation"> <el-button v-for="(o, key) in th.operation" :key="key" @click="o.clickFun(scope.row)" style="width:100%" type="text" size="mini"> {{o.name}} </el-button> </div> <!-- 點擊跳轉頁面 --> <div v-else-if="th.router"> <router-link :to="{path: th.router.path, query: {expertFields: scope.row['fieldName']}}">{{scope.row[th.prop]}}</router-link> </div> <div v-else> <!-- 鼠標滑過顯示氣泡框 --> <el-popover v-if="th.describe" popper-class="popover-el-class" placement="bottom" width="200" trigger="hover" :content="scope.row[th.prop]"> <span class="describe-wrap" slot="reference" style="-webkit-box-orient:vertical">{{ scope.row[th.prop] }}</span> </el-popover> <!-- 下拉選擇框 --> <el-select v-else-if="th.selected" :disabled="!th.disabled" v-model="scope.row[th.prop]" @change="th.changeFunc" clearable> <el-option v-for="(item, index) in th.selected" :value="item.value" :label="item.text" :key="index"></el-option> </el-select> <!-- 純展示數據 --> <span v-else-if="!th.formatData">{{ scope.row[th.prop] }}</span> <!-- 需要格式化的數據結構 --> <span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span> </div> </template> </el-table-column> </el-table> </template> <script> export default { name: 'comp-table', props: { tableData: { type: Array, default: function () { return [] } }, tableHeader: { type: Array, default: function () { return [] } }, multipleSelection: { type: Array, default: function () { return [] } } }, filters: { formatters (val, format) { if (typeof (format) === 'function') { return format(val) } else return val } }, methods: { handleSelectionChange (val) { this.$emit('update:multipleSelection', val) }, handleSort (sort) { this.$emit('sort-events', sort) }, filterHandler (filters) { this.$emit('filter-events', filters) } } } </script>
頁面內調用:
<comp-table :tableData="tableData" :tableHeader="tableHeader" :multipleSelection.sync="multipleSelection" @filter-events="filterEvents" @sort-events="sortEvents"> </comp-table> <script> export default { data () { return { tableData: [], // 請求到的表格數據 tableHeader: [ // 表頭信息 { prop: 'fieldName', label: '領域', filters: domainTypeData, columnKey: 'fieldType', filterMultiple: false, minWidth: '150px', fixed: true }, { prop: 'fieidDetails', label: '詳情', minWidth: '180px' }, { prop: 'lawyerQuantity', label: '關聯律師數量', minWidth: '150px', router: {path: '/'} }, { prop: 'articlesNumber', label: '相關文章數量', router: {path: '/case-management'}, minWidth: '150px' }, { prop: 'operation', label: '相關服務', minWidth: '260px', style: {display: 'block'}, operation: [ {name: '服務方案一', clickFun: this.getServiceOne}, {name: '服務方案二', clickFun: this.getServiceTwo}, {name: '服務方案三', clickFun: this.getServiceThird} ] }, { prop: 'gmtModified', custom: 'custom', label: '最后更新時間', minWidth: '180px', formatData: this.formatDate }, { prop: 'updater', label: '最后更新人', minWidth: '120px' }, { prop: 'operation', label: '操作', minWidth: '260px', operation: this.fieldStatus ? [ {name: '上線', disabled: true, clickFun: this.onLineField}, {name: '下線', underline: true, clickFun: this.underField} ] : [ {name: '編輯', clickFun: this.editDomain}, {name: '刪除', clickFun: this.delField}, {name: '待審核', clickFun: this.examineField} ] } ] } } } </script>