表格中我们经常需要动态加载数据， 如果有多个页面都需要用到表格， 那我希望可以有个组件， 只传数据过去显示， 不用每个页面都去写这么一段内容：
<el-table :data="tableData" border size="mini" fit highlight-current-row> <el-table-column type="index" fixed></el-table-column> <el-table-column prop="DHM" min-width="140px" label="时间"></el-table-column> <el-table-column prop="PLAZANO" min-width="100px" label="编码"></el-table-column> <el-table-column prop="PLAZANAME" min-width="100px" label="名称"></el-table-column> <el-table-column prop="CAR_PLATE" label="号码"></el-table-column> <el-table-column prop="CARD_NO" min-width="120px" label="卡号"></el-table-column> <el-table-column prop="DATATYPE" label="数据类型" :formatter="formatDATATYPE"></el-table-column> <el-table-column prop="STAFFNAME" min-width="100px" label="姓名"></el-table-column> <el-table-column prop="MEDIATYPE" label="付款方式"></el-table-column> <el-table-column prop="COMP_CASH" label="计算费额"></el-table-column> <el-table-column prop="FACT_CASH" label="实收费额"></el-table-column> <el-table-column label="操作" min-width="140px"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small">编辑</el-button> </template> </el-table-column> </el-table>
上面这段代码是一个element-ui中tabele表格的形式，这里表头都是已经固定的， 如果每个页面都写上这么一段， 不同的是表头名字和字段，这样子就有点重复，而且页面的篇幅也就比较大了，于是把这块写成一个组件， 每个页面引入这个组件， 再传入数据。
1. 表格组件：
•首先 table.vue 组件可以这样写：
<el-table :data="tableData" border size="mini" fit highlight-current-row :row-style="rowStyle" @row-dblclick="rowDblclick" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.3)"> <el-table-column type="index" fixed></el-table-column> <!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值), oper: 是否有操作列 oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 --> <el-table-column v-for="(th, key) in tableHeader" :key="key" :prop="th.prop" :label="th.label" :fixed="th.fixed" :min-width="th.minWidth"> <!-- 加入template主要是有操作一栏， 操作一栏的内容是相同的， 数据不是动态获取的，不过我这里操作一栏的名字定死了（oper表示是操作这一列，否则就不是） --> <template slot-scope="scope"> <div v-if="th.oper"> <el-button v-for="(o, key) in th.oper" :key="key" @click="o.clickFun(scope.row)" type="text" size="small">{{o.name}}</el-button> </div> <div v-else> <span v-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>
// 这里是传入的数据 props: { tableData: { type: Array, default: function () { return [] } }, rowDblclick: { type: Function, default: (row, event, column) => { console.log('default: ' + row + '---' + event + '---' + column) } }, tableHeader: { type: Array, default: function () { return [] } }, loading: { type: Boolean, default: false } },
• 然后在其他组件中就可以引入table组件， 将数据传给table显示
<table :tableData="tableData" :rowDblclick="rowDblclick" :tableHeader="tableHeader" :loading="loading"></table>
其中 tableData是表格中要显示的数据内容， 这个内容我的是从后台查询出来的， rowDblclick 是双击一行做的操作，如果不需要可以删除， tableHeader 是表头显示的数据， loading 是表格加载的loading方式， 默认是没有的
表头数据格式如下： formatData 是表格里面的数据需要做处理的方法， oper是操作列，查看和编辑是两个按钮，handleClick和editClick点击按钮的方法， 自行补充。
export const tableHeader = [ // 表头数据 { prop: 'dhm', label: '时间', minWidth: '140px' }, { prop: 'plazano', label: '编码', minWidth: '100px' }, { prop: 'plazano', label: '名称', minWidth: '100px', formatData: val => store.getters.allPlazano2Map.get(val) }, { prop: 'car_plate', label: '号码' }, { prop: 'card_no', label: '卡号', minWidth: "120px" }, { prop: 'laneno', label: '数据类型', formatData: function(val) { return val.substr(2, 1) == '1' ? '出口' : '入口' } }, { prop: 'staffname', label: '姓名', minWidth: '100px' }, { prop: 'mediatype', label: '付款方式' }, { prop: 'comp_cash', label: '计算费额' }, { prop: 'fact_cash', label: '实收费额' }, { prop: 'oper', label: '操作', fixed: 'right', minWidth: '140px', oper: [ { name: '查看', clickFun: handleClick }, { name: '编辑', clickFun: editClick } ] } ]