需求是根據JSON文件生成表格，包含配置和自動props屬性以及過濾器；

數據示例：

表格設置：

/*** 表格表頭信息* @chineseToPinYin: 這是封裝的根據中文漢字轉換為拼音的方法* @prop: 表頭字段名* @filter: 數據過濾器* @label: 表頭顯示名稱*/
const tableTitle = [{ prop: chineseToPinYin('日期'), label: '日期', width: '160' },{ prop: chineseToPinYin('地點'), label: '地點', filter: addressFilter },{ prop: chineseToPinYin('早餐'), label: '早餐' },{ prop: chineseToPinYin('開會'), label: '開會' },{ prop: chineseToPinYin('紀要'), label: '紀要' },{ prop: chineseToPinYin('工作'), label: '工作' },{ prop: chineseToPinYin('午餐'), label: '午餐' },{ prop: chineseToPinYin('午休'), label: '午休' },{ prop: chineseToPinYin('下班'), label: '下班' }
]

addressFilter 過濾器：

function addressFilter (value) {return addressOptions.filter(i => i.value === value)[0].label
}

表格事件示例：

/*** 表格按鈕事件* @event: 按鈕事件名（子組件直接@eventName=handleCustomizeEvent）* @primary：按鈕類型（按鈕的顏色）*/
const tableButton = [{ label: '編輯', event: 'edit', type: 'primary' },{ label: '刪除', event: 'delete', type: 'danger' }
]

拋出示例：

export { tableTitle, tableButton }

組件示例：

<el-table ref="autoTable" size='mini'border stripe default-expand-allrow-key="id":data="data"tooltip-effect="dark":header-cell-style="headerCellStyle":cell-style="cellStyle"style="width: 100%"cell-class-name='custom-table'@cell-click="handleClickCells"@row-click="handleClickRow"@selection-change="handleSelectionChange"><!--左側自定義插槽--><slot name="before"></slot><!--左側是否有勾選--><el-table-column v-if="isChecked" fixed="left" label="全選" type="selection" width="40"></el-table-column><!--循環表格--><el-table-column v-for="(item, key) in title" :label="item.label" :width="item.width" :key="key"><template slot-scope="scope"><span v-if="item.filter">{{item.filter(scope.row[item.prop])}}</span><span v-else>{{scope.row[item.prop]}}</span></template></el-table-column>
<!--    <el-table-column v-for="(item, key) in title" :prop="item.prop" :label="item.label" :width="item.width" :key="key"/>--><!--右側自定義插槽--><slot name="after"></slot><!--右側按鈕集合--><el-table-column v-if="event.length" fixed="right" :width="event.length*70" label="操作"><template slot-scope="scope"><span class="customize-link" v-for="(item, key) in event" :key="key" @click="handleTableEvent(item.event, scope.$index, scope.row)"><el-link :type="item.type" :icon="item.icon" size="mini">{{item.label}}</el-link></span></template></el-table-column></el-table>

PROPS示例：

  props: {isChecked: {type: Boolean,default: false},title: {type: Array,default: () => ([])},data: {type: Array,default: () => ([])},event: {type: Array,default: () => ([])}}

methods示例：

  methods: {// 表格選擇行handleSelectionChange (row) {this.$emit('checkRow', row, this.$refs.autoTable)},// 表格操作事件handleTableEvent (event, index, row) {this.$emit(event, index, row)},// 單擊行handleClickRow (row, column, event) {this.$emit('clickRow', row, column, event)},// 選擇某個單元格handleClickCells (row, column, cell, event) {this.$emit('clickCell', row, column, cell, event)}}

頁面示例：

<auto-table is-checked :title="tableTitle" :data="mockTableData" :event="tableButton" @checkRow="handleTableCheckRow" @edit="handleClickTableEdit" @delete="handleClickTableDelete"/>

事件部分就不用叨叨了吧；

效果示例：