<template>
<el-table :data="tableData" size="medium" fit
:header-cell-style="{height: '40px',padding: '0',background: '#f7f9fa','font-size': '12px',color: '#8590a6'}"
:row-style="{'font-size': '12px',color: '#212121'}"
ref="multipleTable" border stripe
@sort-change="handleSort"
@filter-change="filterHandler"
@row-click="handleRowClick">
<el-table-column v-for="(th, key) in tableHeader"
:key="key"
:prop="th.prop"
:label="th.label"
:fixed="th.fixed"
:sortable="th.sortable?'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">
<ex-slot v-if="th.render" :render="th.render" :row="scope.row" :index="scope.$index" :column="th" />
<span v-else>{{ scope.row[th.prop] || '-' }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
// 自定义内容的组件
var exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, data) => {
const params = {
row: data.props.row,
index: data.props.index
}
if (data.props.column) params.column = data.props.column
return data.props.render(h, params)
}
}
export default {
name: 'comp-table',
components: { exSlot },
props: {
// 表格数据
tableData: {
type: Array,
default: function () {
return []
}
},
// 表头数据
tableHeader: {
type: Array,
default: function () {
return []
}
}
},
methods: {
// 排序事件
handleSort (sort) {
this.$emit('sort-events', sort)
},
// 筛选事件
filterHandler (filters) {
this.$emit('filter-events', filters)
},
// 某一行被点击
handleRowClick (row) {
this.$emit('click-events', row)
}
}
}
</script>
<template>
<compTable
:tableHeader="tableHeader"
:tableData="tableData"
@sort-events="handleSort"
@filter-events="filterHandler"
@click-events="handleClick"
/>
</template>
<script>
import compTable from '@/components/compTable'
export default {
components: { compTable },
data () {
return {
// 数据结构
tableData: [], // 为请求到的table数据
tableHeader: [ // 表头信息,可根据minWidth修改宽度
{ prop: 'uid', label: '订单号', minWidth: '160px' },
{
prop: 'peopleNumber',
label: '人数',
sortable: 'custom',
minWidth: '75px'
},
{
prop: 'source',
label: '来源',
filters: sourceData,
columnKey: 'sourceList',
minWidth: '90px',
render: (h, params) => {return h('span',params.row.source)
}
}
}
}
}
</script>