<template>
|
<div>
|
<div v-if="editing" style="margin-bottom:10px">
|
<el-button size="small" type="primary" icon="el-icon-plus" @click="addRow">新增一行</el-button>
|
<el-button size="small" type="danger" icon="el-icon-delete" :disabled="!selectedRows.length" @click="deleteRows">删除选中</el-button>
|
</div>
|
<el-table :data="localData" border @selection-change="onSelect" ref="table">
|
<el-table-column v-if="editing" type="selection" width="45" align="center" />
|
<el-table-column
|
v-for="col in columns" :key="col.prop"
|
:prop="col.prop"
|
:label="col.label"
|
:width="col.width"
|
:min-width="col.minWidth"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<!-- 编辑模式 -->
|
<template v-if="editing">
|
<!-- date -->
|
<el-date-picker
|
v-if="col.type === 'date'"
|
v-model="scope.row[col.prop]"
|
value-format="yyyy-MM-dd"
|
size="small"
|
style="width:100%"
|
/>
|
<!-- number -->
|
<el-input-number
|
v-else-if="col.type === 'number'"
|
v-model="scope.row[col.prop]"
|
size="small"
|
:controls="false"
|
style="width:100%"
|
/>
|
<!-- select -->
|
<el-select
|
v-else-if="col.type === 'select'"
|
v-model="scope.row[col.prop]"
|
size="small"
|
style="width:100%"
|
>
|
<el-option v-for="o in col.options" :key="o" :label="o" :value="o" />
|
</el-select>
|
<!-- text -->
|
<el-input v-else v-model="scope.row[col.prop]" size="small" />
|
</template>
|
<!-- 查看模式：tag for select fields -->
|
<template v-else>
|
<el-tag v-if="col.type === 'select' && scope.row[col.prop]"
|
:type="tagType(scope.row[col.prop])" size="small"
|
>{{ scope.row[col.prop] }}</el-tag>
|
<span v-else>{{ scope.row[col.prop] }}</span>
|
</template>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "EditableTable",
|
props: {
|
data: { type: Array, default: () => [] },
|
editing: { type: Boolean, default: false },
|
columns: { type: Array, default: () => [] },
|
tableKey: { type: String, default: "" },
|
},
|
data() {
|
return {
|
localData: [],
|
selectedRows: [],
|
};
|
},
|
watch: {
|
data: { immediate: true, handler(v) { this.localData = v || []; } },
|
localData: { deep: true, handler(v) { this.$emit("update:data", v); } },
|
},
|
methods: {
|
addRow() {
|
const row = {};
|
this.columns.forEach(col => {
|
if (col.type === 'number') row[col.prop] = null;
|
else if (col.type === 'date') row[col.prop] = '';
|
else row[col.prop] = '';
|
});
|
this.localData.push(row);
|
},
|
deleteRows() {
|
// remove by reference
|
this.localData = this.localData.filter(row => !this.selectedRows.includes(row));
|
this.selectedRows = [];
|
this.$emit("update:data", this.localData);
|
},
|
onSelect(rows) { this.selectedRows = rows; },
|
tagType(v) {
|
if (!v) return '';
|
const good = ['正常','良好','掌握','发送成功','已完成'];
|
const warn = ['偏瘦','偏胖','超重','轻度','中下','注意缺陷可疑','一般','轻度异常'];
|
const bad = ['发育迟缓','差','异常','中度异常','失败','营养不良'];
|
if (good.includes(v)) return 'success';
|
if (warn.includes(v)) return 'warning';
|
if (bad.includes(v)) return 'danger';
|
return '';
|
},
|
},
|
};
|
</script>
|
