refactor(CuteEditTable): 重构表格组件样式和属性配置
- 移除固定高度设置,改为自适应布局 - 添加边框样式提升视觉效果 - 移除序号列以简化表格结构 - 为CuteFormDrawer集成示例添加宽度配置 - 更新数据源属性描述,增加disabled字段说明
This commit is contained in:
@@ -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: '否' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user