<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: "" },
|
// 需要自动连续编号的列 prop（如 seq）。新增行、删除行后都会按行序重排，
|
// 避免出现 1、3、4 这种断号。不传则不处理。
|
autoSeq: { 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) => {
|
// 列上配了 default 就优先用它（可以是值，也可以是 (index, rows) => value）
|
if (col.default !== undefined) {
|
row[col.prop] =
|
typeof col.default === "function"
|
? col.default(this.localData.length, this.localData)
|
: col.default;
|
} else if (col.type === "number") {
|
row[col.prop] = null;
|
} else {
|
row[col.prop] = "";
|
}
|
});
|
this.localData.push(row);
|
this.renumber();
|
},
|
deleteRows() {
|
// remove by reference
|
this.localData = this.localData.filter((row) => !this.selectedRows.includes(row));
|
this.selectedRows = [];
|
this.renumber();
|
this.$emit("update:data", this.localData);
|
},
|
/** 按行序重写 autoSeq 列的序号（1、2、3...） */
|
renumber() {
|
if (!this.autoSeq) return;
|
this.localData.forEach((row, i) => {
|
row[this.autoSeq] = String(i + 1);
|
});
|
},
|
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>
|
