170 lines
5.2 KiB
Plaintext
170 lines
5.2 KiB
Plaintext
<template>
|
||
<el-row>
|
||
<el-col class="m-b-10" :span="24">
|
||
<el-table
|
||
v-adaptive="{bottomOffset}"
|
||
:data="list"
|
||
:height="tableHeight"
|
||
v-bind="$attrs"
|
||
stripe
|
||
:highlight-current-row="highlightCurrentRow"
|
||
@selection-change="handleSelectionChange"
|
||
@sort-change="sortByColumn"
|
||
@select="handleSelect"
|
||
@cell-dblclick="celldblclick"
|
||
>
|
||
<template v-for="(column, index) in columns">
|
||
<slot name="front-slot" />
|
||
<!-- 序号 -->
|
||
<el-table-column v-if="column.type === 'selection'" :key="index" type="selection" width="55" />
|
||
<!-- 复选框 -->
|
||
<el-table-column v-else-if="column.type === 'index'" :key="index" type="index" width="50" />
|
||
<!-- 具体内容 -->
|
||
<el-table-column v-else :key="index" align="left" :label="column.label" :width="column.width" :min-width="column.minWidth" :show-overflow-tooltip="column.showOverflowTooltip || false" :sortable="column.sortable || false" :prop="column.prop">
|
||
<template slot-scope="scope">
|
||
<!-- 仅仅显示文字 -->
|
||
<span v-if="!column.hidden"> <!-- 如果hidden为true的时候 那么当前格可以不显示，可以选择显示自定义的slot-->
|
||
<!-- 操作按钮 -->
|
||
<span v-if="column.type === 'operate'">
|
||
<!-- <a v-for="(operate, i) in column.operates" :key="i" href="javascript:void(0)" class="operate-button" @click="handleClick(operate, scope.row)">
|
||
{{ operate.name }}
|
||
|
||
</a> -->
|
||
<span v-for="(operate, i) in column.operates" :key="i">
|
||
<el-button :size="operate.size || 'mini'" :type="operate.type || 'primary'" style="margin-right:5px;" @click="handleClick(operate, scope.row)">{{ operate.name }}</el-button>
|
||
</span>
|
||
</span>
|
||
<span v-else>
|
||
{{ scope.row[column.prop] }}
|
||
</span>
|
||
</span>
|
||
<!-- 使用slot的情况下 -->
|
||
<span v-if="column.slot">
|
||
<!-- 具名slot -->
|
||
<slot v-if="column.slot" :name="column.slot" :scope="scope" />
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 匿名slot -->
|
||
</template>
|
||
<slot />
|
||
</el-table>
|
||
</el-col>
|
||
<!-- 分页部分 -->
|
||
<el-col v-if="!hiddenPage" :span="24" class="page">
|
||
<pagination :total="total" :page.sync="searchData.PageIndex" :limit.sync="searchData.PageSize" @pagination="pagination" />
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* @author
|
||
* @todo 项目中基本使用表格
|
||
* @slot 1: defaultSlot：插入表格一行 2: front-slot：默认在表格开始处加一行 3:column内slot
|
||
* @property
|
||
* list => 表格数据
|
||
* columns: [ ==> 配置表格头
|
||
* key: => 渲染字段名称
|
||
* title: => 表头名称
|
||
* operates： => 操作数组 [
|
||
* name: 名称
|
||
* emitKey: 要emit出去的事件
|
||
* ]
|
||
* ]
|
||
* demo columns
|
||
* headers: [
|
||
{ type: 'selection'},
|
||
{ type: 'index'},
|
||
{ key: 'loginName', title: 'XXX' },
|
||
{ key: 'userName', title: 'XXX' },
|
||
{ key: 'roleName', title: 'XXX', hidden: true, slot: 'roleSlot' },
|
||
{ key: 'createDate', title: 'XXX' },
|
||
// operate 这一行可以选择直接使用slot或者是使用配置项
|
||
{ type: 'operate', title: 'XXX',
|
||
operates: [
|
||
{ name: 'XXX', emitKey: 'reset' },
|
||
{ name: 'XXX', emitKey: 'edit' },
|
||
{ name: 'XXX', emitKey: 'delete' }
|
||
] }
|
||
]
|
||
*/
|
||
import Pagination from '@/components/Pagination'
|
||
export default {
|
||
name: 'BaseTable',
|
||
components: { Pagination },
|
||
props: {
|
||
// 核心数据
|
||
list: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
|
||
// columns
|
||
columns: {
|
||
type: Array,
|
||
required: true,
|
||
default: () => []
|
||
},
|
||
// is hidden page for table
|
||
hiddenPage: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
bottomOffset: {
|
||
type: Number,
|
||
default: 45
|
||
},
|
||
searchData: {
|
||
type: Object,
|
||
default: () => {}
|
||
},
|
||
total: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
highlightCurrentRow: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
}
|
||
},
|
||
computed: {
|
||
tableHeight() {
|
||
return 100
|
||
}
|
||
},
|
||
methods: {
|
||
// 处理点击事件
|
||
handleClick(action, data) {
|
||
// emit事件
|
||
this.$emit(`${action.emitKey}`, data)
|
||
},
|
||
// 选中变化
|
||
handleSelectionChange(val) {
|
||
this.$emit('handleSelectionChange', val)
|
||
},
|
||
handleSelect(rows, row) {
|
||
this.$emit('handleSelect', rows, row)
|
||
},
|
||
celldblclick(row, column) {
|
||
this.$emit('celldblclick', row, column)
|
||
},
|
||
sortByColumn(column) {
|
||
this.$emit('sortByColumn', column)
|
||
},
|
||
pagination() {
|
||
this.$emit('getList')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page{
|
||
padding-top: 3px;
|
||
text-align: right;
|
||
}
|
||
</style>
|