修改数据显示
This commit is contained in:
ival
parent
5574df0e9d
commit
1dabf22fd6
173
src/views/components/editTable/index.vue
Normal file
173
src/views/components/editTable/index.vue
Normal file
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-table
|
||||
:size="size"
|
||||
:stripe="stripe"
|
||||
:border="border"
|
||||
:data="tableData"
|
||||
:max-height="maxHeight"
|
||||
:height="height"
|
||||
>
|
||||
<el-table-column v-if="tableForm.index" fixed type="index" />
|
||||
<template v-for="(column, index) in tableForm.columns">
|
||||
<el-table-column
|
||||
v-if="checkFieldType(column.type, 'text')"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.title"
|
||||
:width="column.width || labelWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template slot-scope="scopeT" @focus="handleFocus" @blur="handleBlur">
|
||||
<template v-if="column.editable && (scopeT.row.editing || column.editing)">
|
||||
<el-input v-model="scopeT.row[column.prop]" :size="size" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatText(column, scopeT.row) }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="checkFieldType(column.type, 'select')"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.title"
|
||||
:width="column.width || labelWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template slot-scope="scopeS">
|
||||
<template v-if="column.editable && (scopeS.row.editing || column.editing)">
|
||||
<el-select v-model="scopeS.row[column.prop]" :size="size">
|
||||
<el-option
|
||||
v-for="item in obtainOptions(column)"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ formatText(column, scopeS.row) }}
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="checkFieldType(column.type, 'tag')"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.title"
|
||||
:width="column.width || labelWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template slot-scope="scopeG">
|
||||
<template v-for="tag in column.columnValue(scopeG.row)">
|
||||
<el-tag
|
||||
:key="tag"
|
||||
:type="column.tagType(scopeG.row, scopeG.$index)"
|
||||
style="margin-right: 10px; margin-bottom: 5px;"
|
||||
>{{ tag }}</el-tag>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-if="checkFieldType(column.type, 'button')"
|
||||
:key="index"
|
||||
fixed="right"
|
||||
:prop="column.prop"
|
||||
:label="column.title"
|
||||
:width="column.width || labelWidth"
|
||||
:sortable="column.sortable"
|
||||
>
|
||||
<template slot-scope="scopeB">
|
||||
<el-button :size="size" type="warning" @click.native.prevent="handleFocus(scopeB)">编辑</el-button>
|
||||
<template v-for="(action,idx) in column.buttons">
|
||||
<el-button :key="idx" :size="size" :type="action.type" @click.native.prevent="handleClick(action, scopeB)">{{ action.name }}</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 400;
|
||||
}
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 400;
|
||||
}
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default() {
|
||||
return 'mini';
|
||||
}
|
||||
},
|
||||
border: {
|
||||
type: Boolean
|
||||
},
|
||||
stripe: {
|
||||
type: Boolean
|
||||
},
|
||||
tableData: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
tableForm: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
scope: null,
|
||||
labelWidth: '120'
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
obtainOptions(column) {
|
||||
return column.options();
|
||||
},
|
||||
checkFieldType(field, type) {
|
||||
return field == type;
|
||||
},
|
||||
formatText(column, row) {
|
||||
return column.format ? column.format(row) : row[column.prop];
|
||||
},
|
||||
handleClick(action, scope) {
|
||||
this.handleBlur(this.scope);
|
||||
action.handleClick(scope.$index, scope.row);
|
||||
},
|
||||
handleFocus(scope) {
|
||||
this.handleBlur(this.scope);
|
||||
this.$set(this.tableData[scope.$index], 'editing', true);
|
||||
this.scope = scope;
|
||||
},
|
||||
handleBlur(scope) {
|
||||
if (scope) {
|
||||
this.$set(this.tableData[scope.$index], 'editing', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .el-table {
|
||||
td,th {
|
||||
padding: 0px;
|
||||
}
|
||||
td:nth-child(1), th:nth-child(1) {
|
||||
background: #fefefe;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -97,65 +97,13 @@ export default {
|
||||
},
|
||||
{
|
||||
title: '车组号',
|
||||
prop: 'groupNumber',
|
||||
prop: 'trainCode',
|
||||
type: 'select',
|
||||
width: '150',
|
||||
options: () => { return this.groupNumberList; },
|
||||
editable: true,
|
||||
editing: true
|
||||
},
|
||||
{
|
||||
title: '回库段',
|
||||
prop: 'inDepot',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '回库状态',
|
||||
prop: 'inStatus',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.inStatus, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.inStatus) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '下线方向码',
|
||||
prop: 'offlineDirectionCode',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线轨',
|
||||
prop: 'offlineSection',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线服务号',
|
||||
prop: 'offlineServerNumber',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线目的地',
|
||||
prop: 'offlineTargetNumber',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线时间',
|
||||
prop: 'offlineTime',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线车次号',
|
||||
prop: 'offlineTripNumber',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '上线方向码',
|
||||
prop: 'onlineDirectionCode',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '上线轨',
|
||||
prop: 'onlineSection',
|
||||
@ -179,7 +127,8 @@ export default {
|
||||
{
|
||||
title: '上线车次号',
|
||||
prop: 'onlineTripNumber',
|
||||
type: 'text'
|
||||
type: 'text',
|
||||
format: (row) => { return `${row.onlineDirectionCode}${row.onlineTripNumber}`; }
|
||||
},
|
||||
{
|
||||
title: '出库段',
|
||||
@ -199,9 +148,47 @@ export default {
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '列车编码',
|
||||
prop: 'trainCode',
|
||||
title: '下线轨',
|
||||
prop: 'offlineSection',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线服务号',
|
||||
prop: 'offlineServerNumber',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线目的地',
|
||||
prop: 'offlineTargetNumber',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线时间',
|
||||
prop: 'offlineTime',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '下线车次号',
|
||||
prop: 'offlineTripNumber',
|
||||
type: 'text',
|
||||
format: (row) => { return `${row.offlineDirectionCode}${row.offlineTripNumber}`; }
|
||||
},
|
||||
{
|
||||
title: '回库段',
|
||||
prop: 'inDepot',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
title: '回库状态',
|
||||
prop: 'inStatus',
|
||||
type: 'tag',
|
||||
columnValue: (row) => { return this.$ConstSelect.translate(row.inStatus, 'Whether'); },
|
||||
tagType: (row) => {
|
||||
switch (row.inStatus) {
|
||||
case true: return 'success';
|
||||
case false: return 'danger';
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user