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