refactor(CuteEditTable): 重构表格组件样式和属性配置

- 移除固定高度设置,改为自适应布局
- 添加边框样式提升视觉效果
- 移除序号列以简化表格结构
- 为CuteFormDrawer集成示例添加宽度配置
- 更新数据源属性描述,增加disabled字段说明
This commit is contained in:
2026-02-05 09:44:54 +08:00
parent 974e9946dc
commit 421788fce8
2 changed files with 3 additions and 13 deletions
@@ -12,13 +12,11 @@
empty-text="暂无数据" empty-text="暂无数据"
:row-key="primaryKey" :row-key="primaryKey"
fit fit
border
:data="dataSource" :data="dataSource"
style="width: 100%;" style="width: 100%;"
:height="height"
:max-height="height"
highlight-current-row highlight-current-row
> >
<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 v-slot="scope"> <template v-slot="scope">
<el-input <el-input
@@ -92,14 +90,6 @@ export default {
default: function() { default: function() {
return [] return []
} }
},
/**
* 表格高度
*/
height: {
type: Number,
required: false,
default: 240
} }
}, },
data() { data() {
@@ -8,7 +8,7 @@
<h4>基础用法</h4> <h4>基础用法</h4>
<cute-edit-table v-model="dataSource" primary-key="id" :schema="schema" /> <cute-edit-table v-model="dataSource" primary-key="id" :schema="schema" />
<h4>与CuteFormDrawer集成 <el-button type="text" @click="showFormDrawer">显示抽屉</el-button></h4> <h4>与CuteFormDrawer集成 <el-button type="text" @click="showFormDrawer">显示抽屉</el-button></h4>
<cute-form-drawer ref="formDrawer" title="与CuteFormDrawer集成" :model="form"> <cute-form-drawer ref="formDrawer" title="与CuteFormDrawer集成" :model="form" width="55%">
<el-form-item label="可编辑表格" prop="editValues" label-width="100px"> <el-form-item label="可编辑表格" prop="editValues" label-width="100px">
<cute-edit-table v-model="form.editValues" primary-key="id" :schema="schema" /> <cute-edit-table v-model="form.editValues" primary-key="id" :schema="schema" />
</el-form-item> </el-form-item>
@@ -77,7 +77,7 @@ export default {
{ name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' }, { name: 'name', remark: '表单项名称', type: 'string', defaultValue: '-', required: '是' },
{ name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' }, { name: 'title', remark: '表单项标题', type: 'string', defaultValue: '-', required: '是' },
{ name: 'type', remark: '表单项类型。input 输入框 | select 单选框', type: 'string', defaultValue: '-', required: '是' }, { name: 'type', remark: '表单项类型。input 输入框 | select 单选框', type: 'string', defaultValue: '-', required: '是' },
{ name: 'dataSource', remark: '当type=select时必填', type: 'array', defaultValue: '[]', required: '否' } { name: 'dataSource', remark: '数据源。当type=select时必填。当数据源中包含disabled字段时,当前行会随着disabled的值禁用与启用', type: 'array', defaultValue: '[]', required: '否' }
] ]
} }
}, },