forked from mt-fe-group/mt-yd-ui
update base-table
This commit is contained in:
parent
93912aa193
commit
65c4ce9d45
@ -1,33 +1,41 @@
|
||||
<template>
|
||||
<div class="base-table">
|
||||
<el-table
|
||||
:data="data"
|
||||
style="width: 100%"
|
||||
fit
|
||||
border
|
||||
:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
|
||||
:max-height="maxHeight"
|
||||
>
|
||||
<el-table :data="data" style="width: 100%" fit border :header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }" :max-height="maxHeight">
|
||||
<!-- 表格头定义 -->
|
||||
<el-table-column
|
||||
v-for="(head, idx) in tableHeadConfigs"
|
||||
:key="idx"
|
||||
:type="head.type"
|
||||
:index="head.index"
|
||||
:label="head.label?head.label:head.name"
|
||||
:prop="head.prop"
|
||||
:width="head.width"
|
||||
:min-width="head.minWidth"
|
||||
:fixed="head.fixed"
|
||||
:show-overflow-tooltip="true"
|
||||
filter-placement="top"
|
||||
:align="head.align"
|
||||
>
|
||||
<template v-if="head.prop" slot-scope="scope">
|
||||
<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emitData="handleSubEmitData" />
|
||||
<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-for="(head, idx) in tableHeadConfigs">
|
||||
<!-- 带type的表头 -->
|
||||
<el-table-column
|
||||
:key="idx"
|
||||
v-if="head.type"
|
||||
:type="head.type"
|
||||
:label="head.label || head.name || ''"
|
||||
:header-align="head.align || 'center'"
|
||||
:align="head.align || 'center'"
|
||||
:width="head.width || 50"
|
||||
v-bind="head.more"
|
||||
></el-table-column>
|
||||
<!-- 普通的表头 -->
|
||||
<el-table-column
|
||||
v-else
|
||||
:key="idx"
|
||||
:label="head.label ? head.label : head.name"
|
||||
:prop="head.prop"
|
||||
:width="head.width"
|
||||
:min-width="head.minWidth"
|
||||
:fixed="head.fixed"
|
||||
:show-overflow-tooltip="head.showOverflowTooltip || false"
|
||||
filter-placement="top"
|
||||
:align="head.align"
|
||||
v-bind="head.more"
|
||||
>
|
||||
<!-- 子组件 -->
|
||||
<template v-if="head.prop" slot-scope="scope">
|
||||
<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emitData="handleSubEmitData" />
|
||||
<!-- 直接展示数据或应用过滤器 -->
|
||||
<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
@ -36,27 +44,27 @@
|
||||
export default {
|
||||
name: 'BaseTable',
|
||||
props: {
|
||||
tableHeadConfigs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
tableHeadConfigs: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default: 500
|
||||
}
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default: 500
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
commonFilter: (source, filterType = a => a) => {
|
||||
return filterType(source)
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
handleSubEmitData(payload) {
|
||||
this.$emit('operate-event', payload)
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
</el-form>
|
||||
<el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column type="index" header-align="center" align="center" label="序号"></el-table-column>
|
||||
<el-table-column prop="id" header-align="center" align="center" label="id"></el-table-column>
|
||||
<el-table-column prop="code" header-align="center" align="center" label="编码"></el-table-column>
|
||||
<el-table-column prop="name" header-align="center" align="center" label="设备名称"></el-table-column>
|
||||
@ -72,9 +73,54 @@
|
||||
import BaseTable from '@/components/base-table'
|
||||
import AddOrUpdate from './equipment-add-or-update'
|
||||
|
||||
const TableOperateComponent = {
|
||||
name: 'TableOperations',
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
btnTypes: {
|
||||
add: 'primary',
|
||||
delete: 'danger',
|
||||
detail: 'info'
|
||||
// add more...
|
||||
},
|
||||
colors: {
|
||||
// add more...
|
||||
},
|
||||
text: {
|
||||
// for i18n inject:
|
||||
'add': '添加'
|
||||
// add more...
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 发射事件
|
||||
},
|
||||
render: function(h) {
|
||||
let btns = []
|
||||
for (const optionStr of this.injectData.head?.options) {
|
||||
btns.push(h('el-button', { props: { type: this.btnTypes[optionStr] } }, optionStr))
|
||||
}
|
||||
return h('span', null, btns)
|
||||
}
|
||||
}
|
||||
|
||||
const tableConfigs = [
|
||||
{ type: 'selection' },
|
||||
{ type: 'index', name: 'No' },
|
||||
{
|
||||
type: 'index',
|
||||
name: '序号',
|
||||
more: {
|
||||
index: function(index) {
|
||||
return (index + 1) * 2
|
||||
}
|
||||
}
|
||||
},
|
||||
{ prop: 'id', name: 'id' },
|
||||
{ prop: 'code', name: '编码' },
|
||||
{ prop: 'name', name: '设备名称' },
|
||||
@ -95,12 +141,13 @@ const tableConfigs = [
|
||||
{ prop: 'valid', name: '删除标志，是否有效:1 可用 0不可用' },
|
||||
{ prop: 'creatorId', name: '创建人' },
|
||||
{ prop: 'creatorName', name: '创建人姓名' },
|
||||
{ prop: 'createTime', name: '创建时间' },
|
||||
{ prop: 'createTime', name: '添加时间' },
|
||||
{ prop: 'updaterId', name: '更新人' },
|
||||
{ prop: 'updaterName', name: '更新人姓名' },
|
||||
{ prop: 'updateTime', name: '更新时间' },
|
||||
{ prop: 'version', name: '版本号' },
|
||||
{ prop: 'externalCode', name: '外部系统代码' }
|
||||
{ prop: 'externalCode', name: '外部系统代码' },
|
||||
{ prop: 'operations', name: '操作', fixed: 'right', width: 180, subcomponent: TableOperateComponent, options: ['add', 'detail', 'delete'] }
|
||||
]
|
||||
|
||||
export default {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user