feat(dev): 添加可编辑表格组件

- 新增 CuteEditTable 组件实现表格行内编辑功能
- 支持 input 和 select 类型的单元格编辑
- 提供行删除、上移、下移操作按钮
- 集成到 CuteSimpleTableDemo 演示页面
- 配置可编辑表格的数据源和字段定义
- 实现表格数据变更的双向绑定机制
This commit is contained in:
2026-02-02 15:09:05 +08:00
parent d370e51c02
commit 2e0d60e834
2 changed files with 197 additions and 5 deletions
@@ -99,6 +99,9 @@
<el-table-column prop="description" label="备注" />
</cute-transfer>
</el-form-item>
<el-form-item label="可编辑表格" prop="editValues" label-width="100px">
<cute-edit-table v-model="editTableDataSource" primary-key="id" :schema="editTableSchema" />
</el-form-item>
</cute-form-drawer>
</div>
</template>
@@ -111,18 +114,33 @@ import CuteFormDrawer from '@/views/components/dev/CuteFormDrawer'
import { FormatRowDateTimeStr } from '@/utils/KitUtil'
import CuteButton from '@/views/components/dev/CuteButton.vue'
import CuteTransfer from '@/views/components/dev/CuteTransfer.vue'
import CuteEditTable from '@/views/components/dev/CuteEditTable.vue'
export default {
name: 'CuteSimpleTableDemo',
components: { CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
components: { CuteEditTable, CuteTransfer, CuteButton, CuteFormDrawer, CuteFormDialog, CuteSimpleTable },
data() {
return {
modeDataSource: [
{ id: 1, name: '小明', description: '小明牛P' },
{ id: 2, name: '小明', description: '小明牛P' },
{ id: 3, name: '小明', description: '小明牛P' },
{ id: 4, name: '小明', description: '小明牛P' },
{ id: 5, name: '小明', description: '小明牛P' }
{ id: 4, name: '小绿', description: '小绿牛P' },
{ id: 5, name: '小黄', description: '小黄牛P' },
{ id: 6, name: '小紫', description: '小紫牛P' },
{ id: 17, name: '小郑', description: '小郑牛P' },
{ id: 18, name: '小王', description: '小王牛P' }
],
editTableSchema: [
{ name: 'name', title: '姓名', type: 'input' },
{ name: 'sex', title: '性别', type: 'select', dataSource: [{ label: '男', value: 'nn' }, { label: '女', value: 'mm' }] },
{ name: 'description', title: '描述', type: 'input' }
],
editTableDataSource: [
{ id: 1, name: '小明', sex: 'mm', description: '小明牛P' },
{ id: 4, name: '小绿', sex: 'nn', description: '小绿牛P' },
{ id: 5, name: '小黄', sex: 'nn', description: '小黄牛P' },
{ id: 6, name: '小紫', sex: 'nn', description: '小紫牛P' },
{ id: 17, name: '小郑', sex: 'mm', description: '小郑牛P' },
{ id: 18, name: '小王', sex: 'nn', description: '小王牛P' }
],
form: {
model: {