tw-vue-el

这个组件是基于在Vite中使用Vue 3和ElmentPlus（二次封装）进行开发，可以帮助您快速开发form和列表页面。

自定义配置

请参见 Vite配置参考。

项目使用

npm install tw-vue-el

完整引入

import { createApp } from "vue"
import App from './App.vue'
import router from "./router/index"
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import twVueEl from 'tw-vue-el'
// 因为表格组件和form组件需要引入相关css
import 'tw-vue-el/dist/style.css'

const app = createApp(App)

app.use(ElementPlus,{locale: zhCn})
app.use(router)
app.use(twVueEl)
app.use(store)
app.mount('#app')

相关组件

<ContentMain></ContentMain>                             // --- 表格搜索
<ContentMainVirtualized></ContentMainVirtualized>       // --- 表格虚拟列表搜索
<CountTo></CountTo>                                     // --- 计步器
<TwForm></TwForm>                                       // --- form组件
<TwCustomForm></TwCustomForm>                           // --- 自定义form组件
<TwDialog></TwDialog>                                   // --- 弹框组件
<TwDrawer></TwDrawer>                                   // --- 抽屉组件
<TwFormItem></TwFormItem>                               // --- 自定义显示控件（基于formItem） 
<TwPagination></TwPagination>                           // --- 分页组件
<TwTable></TwTable>                                     // --- 表格组件
<TwVirtualizedTable></TwVirtualizedTable>               // --- 虚拟表格组件

表格搜索（ContentMain）

ContentMain 是tw-form和tw-table的集合它只接收一个参数mainData,内部的参数才是使用规则.此处只有基础配置属性，详情请跳转相关组件属性查看

ContentMain 使用示例

<template>
    <content-main ref="contentMainRef" :mainData="mainData"></content-main>
</template>

<script setup lang="tsx">
    let contentMainRef = $ref(null)
    
    let mainData = reactive({
        tableUrl: '/operation/appealHand/page',
        isCheck: true,
        columns: [
            {prop: 'appealTimeStr', label: '反馈时间', width: 180},
            {prop: 'alarmTypeName', label: '报警类型', width: 120},
            {prop: 'durationStr', label: '持续时长', width: 120},
            {prop: 'appealStatusName', label: '处理状态', width: 120},
            {prop: 'appealResultName', label: '处理结果', width: 120},
            {prop: 'processPerson', label: '处理人', width: 120},
            {prop: 'processTimeStr', label: '处理时间', width: 120},
        ],
        headBtns: [],
        tableBtns: {
            prop: 'btns',
            label: '操作',
            fixed: 'right',
            width: 100,
            btns: [
            ],
        },
        formData: {
            alarmLevel: 0,
            pageNumber: 1,
            pageSize: 50,
        },
        lists: [],
    })
</script> 

ContentMain 属性

属性名	说明	类型	默认值
lists	用于渲染表格上面搜索	Array	[]
foldNumber	第一行默认显示数量	Number	3
rules	验证规则（同el-form）	Object	{}
formData	同lists的key绑定使用，同时也会默认和表格api绑定获取数据	Object	{}
labelWidth	搜索区域文字描述宽度	String	'120px'
isFormBnts	是否显示tw-form相关的操作按钮	Boolean	true
beforeChange	点击搜索按钮时间前触发的事件	Function	-
url	表格请求地址	String	-
id	table的唯一id，一页面多表格场景须赋值，否则无法动态计算高度	String	-
method	表格动态url请求类型	String	post
columns	表格每一列渲染数据	Array	[]
lists	表格每一行渲染数据	Array	[]
tableParams	表格默认请求数据，这里代指mainData.formData。他们是绑定关系	Object	{ pageNumber: 1, pageSize: 25 }
tableHeight	表格固定高度	Number	0
isRradio	单选	Boolean	false
showPagination	分页显示开关	Boolean	true
botHeight	是分页栏加上边距加底部空白位置高度	Number	50
indexFixed	索引左侧定位开关	Boolean	false
isCheck	checkbox显示开关	Boolean	false
checkFixed	checkbox左侧定位开关	String	'left'
showIndex	索引显示开关	Boolean	false
size	表格大小配置	String	'large'
stripe	斑马纹显示开关	Boolean	true
border	边框线显示开关	Boolean	false
pageSizesArr	分页页码	Array	[25, 50, 100]
tableBtns	单例按钮渲染数据	Object	-
small	每页显示条数	Boolean	false
headBtns	顶部操作按钮	Array	[]
isTableHeader	默认显示表格顶部操作栏	Boolean	true
isLoadStatus	默认首次不加载table数据	Boolean	false
highlightCurrentRow	是否高亮显示当前选中行	Boolean	true
rowClassName	行样式名称，同elTable一样	Function	-
selectable	isCheck必须为true 用于判断选项是否可以点击，返回true或false	Function	{ return true}
autoScrollToTop	请求数据后是否自动滚动到顶部	Boolean	true
layout	表格分页布局默认配置，依赖elPagination	String	total, prev, pager, next, sizes, jumper
background	表格的背景颜色	Boolean	true
loadingBg	表格接口加载状态下背景颜色	String	rabg(225,225,225)
emptyText	列表无数据时展示的文字	String	暂无数据

ContentMain 事件

事件名	说明	类型
tableCallback	表格api加载完成后响应的事件	Function
checkSelect	表格点击checkbox响应的事件，对应elTable - select事件	Function
rowCheck	表格点击行数据响应的事件	Function
tableCurrentChange	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	Function
resetForm	form点击重置按钮响应的事件	Function
submitForm	form点击搜索按钮响应的事件	Function
selectionChange	表格的check选择， 对应elTable - selection-change事件	Function

ContentMain Exposes

事件名	说明	类型
getTable	主动触发表格加载	Function
seekTable	模拟触发form搜索事件功能	Function
getAllCheck	获取表格已勾选数据	Function
getTableLists	获取表格已渲染行数据	Function
setTableLists	设置表格待渲染的行数据	Function
setCurrentRow	设置表格行高亮	Function
clearSelection	清空表格已勾选数据	Function
toggleRowSelection	设置表格行数据选择	Function
setTableTotal	设置表格Total数值	Function
setTableDataHeight	重新计算表格的自适应高度	Function

ContentMain 插槽

tw-form lists单个对象自定义key就是自定义插槽，适场景使用。虽然提供此功能，但不建议使用

事件名	说明
tableHeader	表格按钮上方自定义区域
table-l	同表格按钮一行，左侧可操作区域
table-c	同表格按钮一行，中间可操作区域
table-r	同表格按钮一行，右侧可操作区域
tableBotHeader	表格按钮下方自定义区域

表格虚拟列表搜索（ContentMainVirtualized）

ContentMainVirtualized 如需使用查看如下描述后在使用

1. 是tw-form和TwVirtualizedTable的集合它只接收一个参数mainData,
2. 本质如同contentMain,只是加载行为是滚动加载更多数据并且处理了keep-alive切换页面后的部分兼容问题
3. 其次因为大批量数据一般不会每次提供总数，所以数据接口和总数接口是做了分离的

ContentMainVirtualized 使用示例

<template>
    <content-main-virtualized ref="contentMainRef" :mainData="mainData"></content-main-virtualized>
</template>

<script setup lang="tsx">
    let contentMainRef = $ref(null)
    
    let mainData = reactive({
        tableUrl: '/operation/appealHand/page',
        totalUrl: '/operation/appealHand/pageCount',
        isCheck: true,
        selectable: (row, index) => {
            return row.appealStatusCode !== 300
        },
        columns: [
            {prop: 'appealTimeStr', label: '反馈时间', width: 180},
            {prop: 'alarmTypeName', label: '报警类型', width: 120},
            {prop: 'durationStr', label: '持续时长', width: 120},
            {prop: 'appealStatusName', label: '处理状态', width: 120},
            {prop: 'appealResultName', label: '处理结果', width: 120},
            {prop: 'processPerson', label: '处理人', width: 120},
            {prop: 'processTimeStr', label: '处理时间', width: 120},
        ],
        headBtns: [],
        tableBtns: {
            prop: 'btns',
            label: '操作',
            fixed: 'right',
            width: 100,
            btns: [
            ],
        },
        formData: {
            alarmLevel: 0,
            pageNumber: 1,
            pageSize: 50,
        },
        lists: [],
    })
</script> 

统计（CountTo）

显示统计数据。

CountTo 属性

属性名	说明	类型	默认值
startVal	动画开始值	Number	0
endVal	动画结束值	Number	0
duration	动画滚动时间	Number	3000
autoplay	是否自动播放	Boolean	true
decimals	保留几位小数	Number	0
decimal	小数	String	.
separator	千分位符号	String	,
prefix	统计值前置自定义文本	String	-
suffix	统计值后置自定义文本	String	-
useEasing	使用缓和	Boolean	true
easingFn	缓和回调	Function	-

CountTo 方法

方法名	说明	类型
mountedCallback	挂载后返回的回调	Function
callback	动画后返回的回调	Function

form组件（TwForm）

此组件只服务于contentMain,核心用法请综合TwCustomForm和contentMain描述区域使用。 注意：请不要混淆TwForm和TwCustomForm组件。 TwCustomForm会更轻量，便于更复杂的form场景使用

自定义form组件（TwCustomForm）

注意：请不要混淆TwForm和TwCustomForm组件。 TwCustomForm会更轻量，便于更复杂的form场景使用。请合理使用TwCustomForm组件

TwCustomForm组件自带placeholder，同时placeholder是跟label强关联的。并且可以自定义使用slot

1. 输入框提示：请输入年龄
2. 选择框提示：请选择年龄
3. 自定义使用slot需先声明slot为true，然后自定义编写具名template

基础使用示例

// 虽然vue3的模板语言说可以不在用div包着了，但是如果不包很有很多隐性的bug。请不要节省这个时间
// 虽然vue3的模板语言说可以不在用div包着了，但是如果不包很有很多隐性的bug。请不要节省这个时间
// 虽然vue3的模板语言说可以不在用div包着了，但是如果不包很有很多隐性的bug。请不要节省这个时间

<template>
    <div>
        <tw-custom-form
                ref="fromDataRef"
                :lists="mainData.lists"
                :rules="mainData.rules"
                :formData="mainData.formData"
            >
               <template #securityProtocol>
                  这里是持续时长的自定义
               </template>
            </tw-custom-form>
        <el-button @click="save">保存</el-button>
    </div>
     
</template>

<script setup lang="tsx">
    let fromDataRef = $ref(null)
    let mainData = reactive({
        lists: [
            {key: 'entryPointName', label: '反馈时间'},
            {key: 'basicProtocol', label: '报警类型'},
            {key: 'securityProtocol', label: '持续时长', slot: true},  // 自定义slot
        ],
        rules: {
            entryPointName: [
                { required: true, message: '请输入配置名称', trigger: 'blur'},
            ],
            basicProtocol: [
                { required: true, message: '请选择协议版本', trigger: 'blur'},
            ],
            securityProtocol: [
                { required: true, message: '请选择主动安全', trigger: 'blur'},
            ],
        },
    })
    
    // 组件内置有svae方法，详情请查看配置。
    const save = () => {
        fromDataRef.submitForm(false).then((form) => {
            loading = true
            addOrUpdate(form).then(() => {
                loading = false
            }).catch(() => {
                loading = false
            })
        })
    }
</script> 

自定义form组件最关键的就是lists参数，lists又是根据type来转义到相关内部组件，以下是能使用的type属性。type属性默认就是twInput（输入框）如上示例

TwCustomForm 属性

属性名	说明	类型	默认值
lists	用于渲染表格上面搜索	Array	[]
rules	验证规则（同el-form）	Object	{}
formData	同lists的key绑定使用，同时也会默认和表格api绑定获取数据	Object	{}
labelWidth	搜索区域文字描述宽度	String	'120px'
isFormBnts	是否显示tw-form相关的操作按钮	Boolean	false
beforeChange	点击保存按钮时间前触发的	Function	-

TwCustomForm 属性 Lists type

label 和 key 是必传字段。其次type除了input框，也都是必传字段（具体请看下面配置）

1. twInput 输入框类型

{key: 'securityProtocol', label: '持续时长'}

属性名	说明	类型	默认值
labelWidth	标签单个宽度	String	'120px'
maxlength	同原生 maxlength 属性	String/Number	-
minlength	原生属性，最小输入长度	String/Number	-
max	原生 max 属性，设置最大值	-	-
min	原生属性，设置最小值	-	-
showWordLimit	是否显示统计字数, 只在 type 为 'text' 或 'textarea' 的时候生效	Boolean	Boolean
placeholder	输入框占位文本	String	-
showPassword	是否显示切换密码图标	Boolean	false
disabled	是否禁用	Boolean	false
size	输入框尺寸，只在 type 不为 'textarea' 时有效	Enum	-
prefixIcon	自定义前缀图标(el引入的icon)	Component	-
suffixIcon	自定义后缀图标(el引入的icon)	Component	-
rows	输入框行数，仅 type 为 'textarea' 时有效	Number	Number
minRows	textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }	Number	-
maxRows	textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }	Number	-
readonly	原生 readonly 属性，是否只读	Boolean	false
resize	控制是否能被用户缩放	Enum	-
validateEvent	输入时是否触发表单的校验	Boolean	true
inputStyle	input 元素或 textarea 元素的 style	string/object	{}
clearable	是否显示清除按钮，只有当 type 不是 textarea时生效	Boolean	-
props.type	类型	string等原生 input 类型	text

2. select 选择框类型

// 基础
{key: 'securityProtocol', label: '持续时长', type: 'select', children: [ {label: '北京', value: 1'}]}

// 自定义label value
{key: 'securityProtocol', label: '持续时长', type: 'select', children: [ {labelZdy: '北京', valueZdy: 1'}], props: {label: 'labelZdy', value: 'valueZdy'}}

// 接口请求
{label: '车牌号', key: 'vehicleCode', type: 'select', remote: true, url: '/business/vehicle/associationPlateNum', method: 'post', loadMore: true, params: { keyword: route.query.plateNum ||'', pageNumber: 1, pageSize: 25, havePermission: true }, props: { label: 'plateNum', value: 'vehicleCode' }, placeholder: '请选择车牌号码',},

配置维度是依赖el-select

属性名	说明	类型	默认值
url	接口地址，只有在remote: true情况使用	String	-
method	接口请求类型	String	'post'
params	接口请求参数	Object	{}
labelWidth	标签单个宽度	String	'120px'
multiple	是否多选	Boolean	-
collapseTags	多选时是否将选中值按文字的形式展示,不等于false就默认为true	Boolean	-
clearable	是否可以清空选项	Boolean	false
disabled	是否禁用	Boolean	false
remote	其中的选项是否从服务器远程加载	Boolean	false
defaultFirstOption	是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用	Boolean	false
filterable	Select 组件是否可筛选	Boolean	false
allowCreate	是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效	Boolean	false
multipleLimit	multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制	Number	0
reserveKeyword	当 multiple 和 filterable被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词	Boolean	true
children	自定义下拉渲染数据	Array	[]
change	选中值发生变化时触发	Function	-

3. date 日期选择器

// 基础
{label: '活动时间', key: 'date1', type:'date', showPassword: true },


// 日期时间选择
{label: '日期时间', key: 'date2', type:'date', data: {type: 'datetime'} },

// 时间格式
{ key: 'issueDate', label: '初次领证日期',col:12, type:'date', placeholder: '请输入初次领证日期', data: {valueFormat: 'YYYY-MM-DD'} },

配置维度是依赖el-date-picker

属性名	说明	类型	默认值
data.type	显示类型	String	date
data.format	显示在输入框中的格式	String	YYYY-MM-DD HH:mm:ss
disabled	禁用	Boolean	false
placeholder	非范围选择时的占位内容	String	-
clearable	是否显示清除按钮	Boolean	false
disabledDate	一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值	Function	-
change	选中值发生变化时触发	Function	-

4. time 时间选择器

// 基础
{label: '开始时间', key: 'startTime', type: 'time'}

// 时间选择
{label: '开始时间', key: 'startTime', type: 'time', data: {valueFormat: 'HH:mm:ss'}}

配置维度是依赖el-time-picker

属性名	说明	类型	默认值
defaultValue	可选，选择器打开时默认显示的时间	Date/object	-
data.format	显示在输入框中的格式	String	YYYY-MM-DD HH:mm:ss
disabled	禁用	Boolean	false
placeholder	非范围选择时的占位内容	String	-
clearable	是否显示清除按钮	Boolean	false
disabledHours	禁止选择部分小时选项	Function	-
disabledMinutes	禁止选择部分分钟选项	Function	-
disabledSeconds	禁止选择部分秒选项	Function	-
change	选中值发生变化时触发	Function	-

5. switch 开关

// 基础
{label: '状态', key: 'state', col: 6, type: 'switch'},


// 自定义名称
{label: '状态', key: 'state', col: 6, type: 'switch', activeText: '启用', inactiveText: '禁用', filter: 'valid'},

配置维度是依赖el-switch

属性名	说明	类型	默认值
activeText	switch 打开时的文字描述	Stringt	是
inactiveText	switch 的状态为 off 时的文字描述	String	否
disabled	禁用	Boolean	false
activeValue	switch 状态为 on 时的值	Boolean	true
inactiveValue	switch的状态为 off 时的值	Boolean	false
inlinePrompt	无论图标或文本是否显示在点内，只会呈现文本的第一个字符	Boolean	false
change	选中值发生变化时触发	Function	-

6. checkbox 多选框

// 基础
{label: '活动类型', key: 'type', type:'checkbox', children:[ {label:'在线活动'},{label:'促销活动'},{label:'线下活动'}] },

配置维度是依赖el-switch

属性名	说明	类型	默认值
props.trueLabel	选中时的值	Stringt	-
props.falseLabel	没有选中时的值	String	-
disabled	禁用	Boolean	false
props.trueValue	选中时的值	Boolean	-
props.falseValue	没有选中时的值	Boolean	-
change	选中值发生变化时触发	Function	-

7. radio 单选框

// 基础
{ key: 'openStatus', label: '模板状态', type: 'radio', children: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 },] }

配置维度是依赖el-radio

属性名	说明	类型	默认值
props.value	单选框的值	Stringt	-
props.label	单选框的 label	String	-
disabled	禁用	Boolean	false
width	所有单个 radio的宽度	Number	-
change	选中值发生变化时触发	Function	-

8. cascader 级联选择器

// 基础
{key: 'dataPermissionCode', label: '所属区域', type: 'cascader', children: [{ label: '启用', value: 1 }, { label: '禁用', value: 0 },]}

// 接口请求
{key: 'dataPermissionCode', label: '所属区域', col: 12, placeholder: '请选择所属区域', remote: true, type: 'cascader', url: '/system/area/getAreaDtoListByParentCode/', method: 'get', params: { default: 0 },paramsType: 'url', props: { label: 'name', value: 'code' },}

配置维度是依赖el-cascader

属性名	说明	类型	默认值
props	详情配置请看props	Object	-
options	选项的数据源， value 和 label 可以通过 CascaderProps 自定义.	Object	[]
disabled	禁用	Boolean	false
collapseTags	多选模式下是否折叠Tag	Boolean	-
change	选中值发生变化时触发	Function	-

弹框组件（TwDialog）

基于ElDialog二次封装。内置了全屏和默认高度，底部按钮等操作。可配合自定义form动态开发

// 基础（默认不显示底部操作开关）
<tw-dialog title="消息列表" v-model="dialogFlag">
   内容
</tw-dialog>

// 接口请求 （显示底部操作按钮）
<tw-dialog title="消息列表" v-model="dialogFlag" isBtns>
   内容
</tw-dialog>

TwDialog 属性

属性名	说明	类型	默认值
title	dialog弹框title配置	String	新增
modelValue	dialog弹框显示隐藏变量	Boolean	false
cancelBtn	取消按钮自定义文字配置	String	取消
confirmBtn	确定按钮自定义文字配置	String	确定
cancelLoading	取消按钮loading配置	Boolean	false
loading	确定按钮loading配置	Boolean	false
width	自定义宽度	Number/String	80%
height	自定义高度	Number/String	100%
btns	底部自定义操作按钮 { type:'默认： primary',key:'事件名称',name:'按钮名称'}	Array	[]
isBtns	底部操作按钮显示开关	Boolean	false
bodyPadding	内容内填充	Number	20
closeOnClickModal	是否可以通过点击modal关闭Dialog	Boolean	true
isFull	是否显示全屏开关	Boolean	true
appendToBody	是否插入body	Boolean	false
dialogTop	顶部距离-特殊场景使用	Number	100
leftHeight	剩余距离-特殊场景使用	leftHeight	140

TwDialog 事件

事件名	说明	类型
onScreenfull	全屏事件	Function
save	确定事件	Function
cancel	取消事件	Function
handleClose	关闭弹框事件	Function

抽屉组件（TwDrawer）

基于ElDrawer二次封装。内置了全屏和默认高度，底部按钮等操作。可配合自定义form动态开发

// 基础（默认显示底部操作开关）且默认高度全屏
<tw-drawer :loading="loading" :title="title" v-model="drawerFlag">
   内容
</tw-drawer>

// 接口请求 （不显示底部操作按钮）
<tw-drawer @handleClose="handleClose" :loading="loading" :title="title" :isBtns="false" v-model="drawerFlag">
   内容
</tw-drawer>

TwDrawer 属性

属性名	说明	类型	默认值
title	dialog弹框title配置	String	新增
modelValue	dialog弹框显示隐藏变量	Boolean	false
cancelBtn	取消按钮自定义文字配置	String	取消
confirmBtn	确定按钮自定义文字配置	String	确定
cancelLoading	取消按钮loading配置	Boolean	false
loading	确定按钮loading配置	Boolean	false
width	自定义宽度	Number/String	800px
top	自定义高度	String	60px
btns	底部自定义操作按钮 { type:'默认： primary',key:'事件名称',name:'按钮名称'}	Array	[]
isBtns	底部操作按钮显示开关	Boolean	true
isScreenfull	内容内填充	Boolean	true
defaultScreenfull	是否可以通过点击modal关闭Dialog	Boolean	false

TwDrawer 事件

事件名	说明	类型
onScreenfull	全屏事件	Function
save	确定事件	Function
handleClose	取消事件	Function
beforeClose	关闭抽屉前的事件	Function
cancel	关闭弹框事件	Function

描述组件（TwFormItem）

基于TwFormrender函数二次封装。核心用于动态显示

<template>
   <tw-form-item label-width="86px" size="small" :lists="mainData.aduitResultList" :row="mainData.formData"></tw-form-item>
</template>

<script setup lang="tsx">
let mainData = reactive({
    aduitResultList:[
        { key: 'plateNum', label: '车牌号：', col: 8 ,labelWidth:'76px'},
        { key: 'plateColorName', label: '车牌颜色：', col: 8 },
        { key: 'alarmTypeName', label: '报警类型：', col: 8 },
        { key: 'eventStartTime', label: '报警开始时间：' , col: 8,labelWidth:'110px'},
        { key: 'eventEndTime', label: '报警结束时间：' , col: 8,labelWidth:'110px'},
        { key: 'eventPersistSecondsStr', label: '持续时长：' , col: 8},
        { key: 'companyName', label: '企业信息：' , col: 8},
    ]
    formData: {
        plateNum: 1,
        plateColorName: 25,
        "alarmTypeName": "3",
        "eventStartTime": "4",
        "eventEndTime": "5",
        "eventPersistSecondsStr": "6",
        "companyName": "7",
    }
})

</script>

TwFormItem 属性

属性名	说明	类型	默认值
lists	渲染数据配置	Array	[]
labelWidth	默认label宽度	String	100px
size	默认显示格式	String	-
mb	底部外边距	String	4px

lists 属性

属性名	说明	类型	默认值
col	列宽比例依赖Layout 布局	Number	12
label	label的描述字段	String	-
labelWidth	自定义label宽度	String	100px
slot	自定义显示内容状态	Boolean	false
key	显示对应的key	String	-
formatter	自定义显示内容	Function	-

分页组件（TwPagination）

基于ElPagination二次封装，内置只能中文。注意：此组件并没有集成所有配置，请适应场景使用

TwFormItem 属性

属性名	说明	类型	默认值
currentPage	当前页	Number	1
pageSize	每页显示条数	Number	25
total	总页数	Number	0
size	table 大小配置	String	default
disabled	每页显示条数	Boolean	false
pageSizesArr	每页显示个数选择器的选项设置	Array	[25, 50, 100]
layout	组件布局，子组件名用逗号分隔	String	total, prev, pager, next, sizes, jumper
background	是否为分页按钮添加背景色	Boolean	true

表格（TwTable）[TwTable]

基于TwTable二次封装且是和分页组件合并使用。内置自动计算高度，api请求，自定义data数据等功能。ContentMain组件也是当前组件组合使用。组件内部没有集成表格树（因为大批量行列数据会容易照成卡顿）。请适应场景使用

<template>
    // 基础渲染
   <TwTable :columns="columns" :lists="mainData.dataLists"></TwTable>
   
   // api渲染
   <TwTable
        ref="TwTable"
        id="regulators_acopy_releasedetails_table_view"
        url="/business/noticePublishScopeEntity/page"
        method="post"
        :tableParams="{ noticeId: rowData.id }"
        :botHeight="100"
        :columns="mainData.columns"
    ></TwTable>
</template>

<script setup lang="tsx">
let TwTable = $ref(null)

let mainData = reactive({
    // tableUrl: '/business/noticePublishScopeEntity/page',
    formData: {
        noticeId: 0,
        order: '',
        orderField: '',
        pageNumber: 1,
        pageSize:25,
    },
    columns: [
        { prop: 'businessName', label: '发布对象' },
        { prop: 'createTime', label: '创建时间' },
        { prop: 'lastModifyTime', label: '发布时间' },
    ],
    dataLists:[ {businessName:'1', createTime:'2', lastModifyTime:'3',}]
})

// 重新请求表格数据（url场景使用）
const getTable = () => {
    TwTable.getTable()
}
</script>

TwTable 属性

属性名	说明	类型	默认值
url	表格请求地址	String	-
id	table的唯一id，一页面多表格场景须赋值，否则无法动态计算高度	String	-
method	表格动态url请求类型	String	post
columns	表格每一列渲染数据	Array	[]
lists	表格每一行渲染数据	Array	[]
tableParams	表格默认请求数据，这里代指mainData.formData。他们是绑定关系	Object	{ pageNumber: 1, pageSize: 25 }
tableHeight	表格固定高度	Number	0
isRradio	单选	Boolean	false
showPagination	分页显示开关	Boolean	true
botHeight	是分页栏加上边距加底部空白位置高度	Number	50
indexFixed	索引左侧定位开关	Boolean	false
isCheck	checkbox显示开关	Boolean	false
checkFixed	checkbox左侧定位开关	String	'left'
showIndex	索引显示开关	Boolean	false
size	表格大小配置	String	'large'
stripe	斑马纹显示开关	Boolean	true
border	边框线显示开关	Boolean	false
pageSizesArr	分页页码	Array	[25, 50, 100]
tableBtns	单例按钮渲染数据	Object	-
small	每页显示条数	Boolean	false
headBtns	顶部操作按钮	Array	[]
isTableHeader	默认显示表格顶部操作栏	Boolean	true
isLoadStatus	默认首次不加载table数据	Boolean	false
highlightCurrentRow	是否高亮显示当前选中行	Boolean	true
rowClassName	行样式名称，同elTable一样	Function	-
selectable	isCheck必须为true 用于判断选项是否可以点击，返回true或false	Function	{ return true}
autoScrollToTop	请求数据后是否自动滚动到顶部	Boolean	true
layout	表格分页布局默认配置，依赖elPagination	String	total, prev, pager, next, sizes, jumper
background	表格的背景颜色	Boolean	true
loadingBg	表格接口加载状态下背景颜色	String	rabg(225,225,225)
emptyText	列表无数据时展示的文字	String	暂无数据

TwTable 事件

事件名	说明	类型
tableCallback	表格api加载完成后响应的事件	Function
checkSelect	表格点击checkbox响应的事件，对应elTable - select事件	Function
rowCheck	表格点击行数据响应的事件	Function
tableCurrentChange	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	Function
selectionChange	表格的check选择， 对应elTable - selection-change事件	Function