修改数据显示
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: '车组号',
|
title: '车组号',
|
||||||
prop: 'groupNumber',
|
prop: 'trainCode',
|
||||||
type: 'select',
|
type: 'select',
|
||||||
width: '150',
|
width: '150',
|
||||||
options: () => { return this.groupNumberList; },
|
options: () => { return this.groupNumberList; },
|
||||||
editable: true,
|
editable: true,
|
||||||
editing: 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: '上线轨',
|
title: '上线轨',
|
||||||
prop: 'onlineSection',
|
prop: 'onlineSection',
|
||||||
@ -179,7 +127,8 @@ export default {
|
|||||||
{
|
{
|
||||||
title: '上线车次号',
|
title: '上线车次号',
|
||||||
prop: 'onlineTripNumber',
|
prop: 'onlineTripNumber',
|
||||||
type: 'text'
|
type: 'text',
|
||||||
|
format: (row) => { return `${row.onlineDirectionCode}${row.onlineTripNumber}`; }
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '出库段',
|
title: '出库段',
|
||||||
@ -199,9 +148,47 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '列车编码',
|
title: '下线轨',
|
||||||
prop: 'trainCode',
|
prop: 'offlineSection',
|
||||||
type: 'text'
|
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