tw-vue-el v1.0.122

tw-vue-el

这个组件是基于在Vite中使用Vue 3和ElmentPlus（二次封装）进行开发，可以帮助您快速开发form和列表页面。默认引入了ElmentPlus基本多少有的组件。可以直接使用

自定义配置

请参见 Vite配置参考。

项目使用

npm install tw-vue-el

mian.ts
import twVueEl from 'tw-vue-el'
import 'tw-vue-el/dist/style.css'

完整引入

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 属性

ContentMain 事件

ContentMain Exposes

ContentMain 插槽

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

表格虚拟列表搜索（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 属性

CountTo 方法

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 4. 公共属性配置有type（定义需要显示的控件）和col（默认24，24等分同el-row的el-col）

基础使用示例

// 虽然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 属性

TwCustomForm 属性 Lists type

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

1. twInput 输入框类型

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

col（默认24，24等分同el-row的el-col

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

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

4. time 时间选择器

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

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

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

5. switch 开关

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


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

配置维度是依赖el-switch

6. checkbox 多选框

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

配置维度是依赖el-switch

7. radio 单选框

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

配置维度是依赖el-radio

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

弹框组件（TwDialog）

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

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

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

TwDialog 属性

TwDialog 事件

抽屉组件（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 属性

TwDrawer 事件

描述组件（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 属性

分页组件（TwPagination）

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

TwFormItem 属性

表格（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 属性

TwTable 事件