feat(CuteEditTable): 添加表格新增行功能并优化输入组件

- 为表格添加新增行按钮,支持动态添加数据行
- 为输入框和选择器添加占位符提示文本
- 修复表格高度计算逻辑,统一使用height属性
- 为schema属性添加默认值空数组
This commit is contained in:
2026-02-02 15:29:04 +08:00
parent 2e0d60e834
commit d2b96186b5
@@ -5,6 +5,7 @@
* @created 2026-02-01 * @created 2026-02-01
--> -->
<template> <template>
<div>
<el-table <el-table
ref="table" ref="table"
stripe stripe
@@ -20,8 +21,18 @@
<el-table-column type="index" width="70" /> <el-table-column type="index" width="70" />
<el-table-column v-for="item in schema" :key="item[primaryKey]" :prop="item.name" :label="item.title"> <el-table-column v-for="item in schema" :key="item[primaryKey]" :prop="item.name" :label="item.title">
<template slot-scope="scope"> <template slot-scope="scope">
<el-input v-if="item.type === 'input'" v-model="scope.row[item.name]" @input="(val) => onRowChange(val, scope.$index, item.name)" /> <el-input
<el-select v-if="item.type === 'select'" v-model="scope.row[item.name]" @change="(val) => onRowChange(val, scope.$index, item.name)"> v-if="item.type === 'input'"
v-model="scope.row[item.name]"
:placeholder="`请输入${item.title}`"
@input="(val) => onRowChange(val, scope.$index, item.name)"
/>
<el-select
v-if="item.type === 'select'"
v-model="scope.row[item.name]"
:placeholder="`请选择${item.title}`"
@change="(val) => onRowChange(val, scope.$index, item.name)"
>
<el-option <el-option
v-for="option in (item.dataSource || [])" v-for="option in (item.dataSource || [])"
:key="option.value" :key="option.value"
@@ -34,11 +45,20 @@
<el-table-column> <el-table-column>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" size="small" @click="onRowRemove(scope.$index)">删除</el-button> <el-button type="text" size="small" @click="onRowRemove(scope.$index)">删除</el-button>
<el-button type="text" size="small" :disabled="scope.$index < 1" @click="onRowUpMove(scope.$index)">上移</el-button> <el-button type="text" size="small" :disabled="scope.$index < 1" @click="onRowUpMove(scope.$index)">上移
<el-button type="text" size="small" :disabled="scope.$index + 1 >= dataSource.length" @click="onRowDownMove(scope.$index)">下移</el-button> </el-button>
<el-button
type="text"
size="small"
:disabled="scope.$index + 1 >= dataSource.length"
@click="onRowDownMove(scope.$index)"
>下移
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-button size="small" plain icon="el-icon-plus" style="width: 100%" @click="onRowAddClick">新增一行数据</el-button>
</div>
</template> </template>
<script> <script>
@@ -68,15 +88,18 @@ export default {
*/ */
schema: { schema: {
type: Array, type: Array,
require: true require: true,
default: function() {
return []
}
}, },
/** /**
* 自定义高度 * 表格高度
*/ */
customHeight: { height: {
type: Number, type: Number,
required: false, required: false,
default: null default: 240
} }
}, },
data() { data() {
@@ -84,14 +107,6 @@ export default {
dataSource: [] dataSource: []
} }
}, },
computed: {
height() {
if (this.customHeight) {
return this.customHeight
}
return document.documentElement.clientHeight - 300
}
},
mounted() { mounted() {
if (this.value && this.value.length > 0) { if (this.value && this.value.length > 0) {
this.dataSource = this.value this.dataSource = this.value
@@ -140,7 +155,6 @@ export default {
* @param index * @param index
*/ */
onRowDownMove(index) { onRowDownMove(index) {
console.log('=====onRowDownMove1', index)
if (index >= this.dataSource.length - 1) { if (index >= this.dataSource.length - 1) {
return return
} }
@@ -150,6 +164,19 @@ export default {
dataSource[index + 1] = temp dataSource[index + 1] = temp
this.dataSource = [...dataSource] this.dataSource = [...dataSource]
this.$emit('input', this.dataSource) this.$emit('input', this.dataSource)
},
/**
* 当添加数据按钮被点击
*/
onRowAddClick() {
const dataSource = this.dataSource
const schema = this.schema
const newObj = {}
for (const element of schema) {
newObj[element.name] = null
}
dataSource.push(newObj)
this.dataSource = [...dataSource]
} }
} }
} }