Vue-custome-components NPM

vue-custome-components插件描述

插件基于UI库 element-plus, @element-plus/icons-vue, 前端框架：vue3 来开发，插件主要包含一些日常常用的组件封装（table组件，动态表单组件...）.

如何使用

按需导入:

      import 'vue-custome-components/dist/style.css'
      import { VueCustomeTable } from 'vue-custome-components'

全局注册:在项目的 main.ts 中进行如下的全局安装

      import VueCustomeComponents from 'vue-custome-components'
      import 'vue-custome-components/dist/style.css'
      app.use(VueCustomeComponents)

全局注册后，在任意子组件中就可以直接使用对应的插件功能

部分组件参数配置

VueCustomeTable:

table属性配置：

属性名	是否必需	属性描述	参数类型	默认值
columns	是	表格数据展示列配置	Array	[]
data	是	表格数据展示	Array	[]
loading	否	用于表格获取数据加载显示	boolean	false
loading-text	否	加载文字显示	string	加载中...
operation-column	否	操作列配置	Array	--
stripe	否	是否为斑马纹	boolean	false
border	否	表格是否带有边框	boolean	false
show-overflow-tooltip	否	内容溢出tip提示	boolean	false
index	否	是否显示序号列	boolean	false
selected	否	是否启动表格的选择	boolean	false
rowKey	否	行唯一key值	string	'id'
page	否	分页配置(配置了启动内部分页组件)	Page	undefined

Page数据配置：

属性名	说明	类型	是否必配
currentPage	当前页	number	是
pageSize	当前页大小	number	是
total	总页数	number	是
pageSizes	页面显示条数配置	number	否

table事件：

事件名	说明	回调参数
size-change	启动内部分页组件,页面size大小发生变化时触发的事件	size
current-change	启动内部分页组件,页面page发生变化时触发的事件	page
fliter-change	表头筛选时触发的事件	filters
handle-operation	操作列表中的操作触发的事件	type(操作类型), data
sort-change	表头排序触发的事件	sort
selection-change	表格checkbox触发的事件	data

table方法：

方法名	说明	参数
toggleRowSelection	用于表格数据回显	data
getSelectionRows	selected为true,获取表格选中的数据	--

columns数据配置：

属性名	属性描述	属性类型	是否必需
label	列名称	string	是
prop	列字段属性(与接口返回的数据字段保持一致)	string	是
fixed	列是否固定	string / boolean	否
width	列字宽度	string / number	否
formatter	自定义格式化内容	(row: any) => any	否
component	自定义组件展示	(date: any) => Component	否
sort	是否启动排序	boolean	否
search	列表是否启动筛选功能	SearchType	否
align	列表对齐方式	string	否
children	用于多级表头显示	column	否

SearchType查询配置：

属性名	属性描述	类型	是否必需
type	筛选类型	input, select, remoteSelect, date,datetime,datetimerange,daterange	是
multiple	remoteSelect是否是多选	boolean	否
maxLength	input 类型限制输入字符	number	否（默认60）
minLimit	（data,datatime,datarange,datatimerange）用于最小值限制，值可以是符合日期格式的string，也可以是列表中的某一个字段	any	否
maxLimit	（data,datatime,datarange,datatimerange）用于最大值限制，值可以是符合日期格式的string，也可以是列表中的某一个字段	any	否
remoteApi	remoteSelect远程检索提供的api函数	(val: string) => Promise	否

operation-column配置：

属性名	属性描述	属性类型	是否必需
label	列名称	string	是
fixed	列是否固定	string / boolean	否
width	列字宽度	string / number	否
btns	操作项配置	Btn	否

Btn配置： | 属性名 | 属性描述 | 是否必需| |----|----|----| | label| 列名称 | 是 | | icon | 图标：结合element-plus图标使用 | 否 | | type | 操作类型 | 是 | | style | 风格参考el-button type风格 | 否 |

表格含有自定义插槽：

插槽名	插槽描述
empty	数据为空显示插槽
operations	操作列插槽

VueCustomeForm:

form属性配置：

属性名	是否必需	属性描述	参数类型	默认值
fields	是	动态生成表单元数据	field	[]
labelWidth	否	标签的长度	string/number	120
labelPosition	否	标签对齐方式	string	right
disabled	否	表单是否禁用	boolean	false
loading	否	用于控制组件外部操作防止多次点击(启动内部操作按钮)	boolean	false

field属性配置：

属性名	是否必需	属性描述	参数类型
type	是	表单元素类型	"input", "select","remoteSelect" , "radio" , "checkbox" , "switch" , "date" ,"datetime" , "datetimerange" , "daterange" , "textarea" ,"component"
prop	是	表单元素属性	string
label	是	属性名称	string
col	否	el-col布局	number
options	否	用于select下拉选项	{label:xxx,value:xxx}
disabled	否	是否禁用状态	boolean
multiple	否	select多选	boolean
multipleLimit	否	多选个数限制	number
dateMinLimit	否	用于最小值限制（data,datatime,datarange,datatimerange），值可以是符合日期格式的string，也可以是表单中的某一个字段	any
dateMaxLimit	否	用于最大值限制（data,datatime,datarange,datatimerange）	any
showWordLimit	否	显示字符限制	boolean
maxLength	否	文本或者文本输入类型类型限制输入字符	number
prefixIcon	否	前缀图标	string/Component
suffixIcon	否	后缀图标	string/Component
autosize	否	textarea 高度是否自适应	boolean/ { minRows: number,maxRows: number,}
activeValue	否	switch打开值	string/boolean/number
inactiveValue	否	switch关闭值	string/boolean/number
activeText	否	switch打开文案	string/boolean/number
inactiveText	否	switch关闭文案	string/boolean/number
rules	否	表单验证	element-plus表单验证规则
showPassword	否	是否显示密码框	boolean
remoteApi	否	用于 select远程检索	(val: string, fromData: FormData) => Promise
comp	否	自定义表单组件：type: component使用，自定义组件必须实现v-modal功能,定义 fields：接受相关配置信息	Component
linkageDisabled	否	表单联动禁用(以表单中其他字段为限定值)	(fromData: FormData) => boolean
linkageRequired	否	表单联动非必填(以表单中其他字段为限定值)	(fromData: FormData) => boolean
linkageFillOrClear	否	当前配置数据变化，自动填充或者清空其他数据	(fromData: FormData) => void
linkageOptions	否	联动optons一般用于联动的级联选项	(fromData: FormData) => Array

表单事件：

事件名	说明	回调参数
submit	启动内部操作按钮，提交校验成功后触发	formData

表单方法：

方法名	说明	参数
validateForm	用于表格验证	callback验证成功的回调函数（可选参数），回调函数同时接受formData数据;返回值（Promise）是验证是否成功
resetForm	表单重置功能	--
getFormData	获取表单数据	--
displayData	表格数据回显	--