zhangli
1 year ago
6 changed files with 291 additions and 34 deletions
@ -0,0 +1,3 @@ |
|||
import Annex from './src/Annex.vue' |
|||
|
|||
export { Annex } |
|||
@ -0,0 +1,120 @@ |
|||
<!-- 附件组件 --> |
|||
<template> |
|||
<div class="table-form"> |
|||
<el-table |
|||
class="multipleTableComponents" |
|||
ref="TableBaseComponents_Ref" |
|||
v-loading="tableLoading" |
|||
:data="tableData" |
|||
:height="height" |
|||
row-key="id" |
|||
:border="border" |
|||
@selection-change="tableSelectionChange" |
|||
@sort-change="tableSortChange" |
|||
@row-click="handleTableSelect" |
|||
style="{width:100%}" |
|||
> |
|||
<!-- 多选 --> |
|||
<el-table-column |
|||
fixed="left" |
|||
:reserve-selection="true" |
|||
type="selection" |
|||
:width="50" |
|||
/> |
|||
<!-- 序号 --> |
|||
<el-table-column |
|||
type="index" |
|||
fixed="left" |
|||
label="序号" |
|||
width="80" |
|||
:align="'center'" |
|||
/> |
|||
<el-table-column |
|||
v-slot="{ row }" |
|||
v-for="headerItem in tableFields" |
|||
:key="headerItem" |
|||
:fixed="headerItem.tableForm &&headerItem.tableForm.fixed? headerItem.tableForm.fixed:''" |
|||
:label="headerItem.label" |
|||
:prop="headerItem.field" |
|||
:sortable="headerItem.tableForm && headerItem.tableForm.sortable ? headerItem.tableForm.sortable:''" |
|||
:width="headerItem.tableForm && headerItem.tableForm.width ? headerItem.tableForm.width : '100'" |
|||
> |
|||
|
|||
<el-form |
|||
ref="TableBaseForm_Ref" |
|||
:model="row" |
|||
:rules="tableFormRules" |
|||
:class="tableFormRules ? '' : 'noRulesForm'" |
|||
> |
|||
<el-form-item > |
|||
<el-input |
|||
v-model="row[headerItem.field]" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</el-table-column> |
|||
<slot></slot> |
|||
<template #empty> |
|||
<el-empty class="vab-data-empty" description="暂无数据" /> |
|||
</template> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
const props = defineProps({ |
|||
// 是否显示选择框 :custom="headerItem.sortable?headerItem.sortable:false" |
|||
selectionTable: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 是否显示序号 |
|||
isShowIndex: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 加载状态 |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
// 列表数据 |
|||
tableData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
}, |
|||
}, |
|||
// 列表头定义 |
|||
tableFields: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
}, |
|||
}, |
|||
// table高度 |
|||
height: { |
|||
type: [Number, String], |
|||
default: () => { |
|||
return '650' |
|||
} |
|||
}, |
|||
// 是否有边框（可拖拽） |
|||
border: { |
|||
type: Boolean, |
|||
default: true, |
|||
}, |
|||
// table输入表单的rules |
|||
tableFormRules: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}) |
|||
console.log(props.tableFields); |
|||
|
|||
</script> |
|||
|
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
import type { CSSProperties } from 'vue' |
|||
import { ColProps, ComponentProps, ComponentName } from '@/types/components' |
|||
import type { AxiosPromise } from 'axios' |
|||
|
|||
export type TableFormSetPropsType = { |
|||
field: string |
|||
path: string |
|||
value: any |
|||
} |
|||
|
|||
export type TableFormValueType = string | number | string[] | number[] | boolean | undefined | null |
|||
|
|||
export type TableFormItemProps = { |
|||
labelWidth?: string | number |
|||
required?: boolean |
|||
rules?: Recordable |
|||
error?: string |
|||
showMessage?: boolean |
|||
inlineMessage?: boolean |
|||
style?: CSSProperties |
|||
} |
|||
|
|||
export type TableFormSchema = { |
|||
// 唯一值
|
|||
field: string |
|||
// 标题
|
|||
label?: string |
|||
// 提示
|
|||
labelMessage?: string |
|||
// col组件属性
|
|||
colProps?: ColProps |
|||
// 表单组件属性，slots对应的是表单组件的插槽，规则：${field}-xxx，具体可以查看element-plus文档
|
|||
componentProps?: { slots?: Recordable } & ComponentProps |
|||
// formItem组件属性
|
|||
formItemProps?: FormItemProps |
|||
// 渲染的组件
|
|||
component?: ComponentName |
|||
// 初始值
|
|||
value?: FormValueType |
|||
// 是否隐藏
|
|||
hidden?: boolean |
|||
// 远程加载下拉项
|
|||
api?: <T = any>() => AxiosPromise<T> |
|||
} |
|||
Loading…
Reference in new issue