vue3 + ts element Plus table组件二次封装

某位不知名的爱先生

已于 2024-05-20 17:31:23 修改

阅读量1.6k

点赞数 45

文章标签： vue.js 前端 javascript typescript

于 2024-04-10 15:49:54 首次发布

本文链接：https://blog.csdn.net/wenyun936/article/details/137599106

版权

一.关于table组件二次封装的设想与实现

1.常规化模块
   1.1 分页组件
       1.1.1 常规化模块
           (1) 分页组件是否展示总页数当前页数页数跳转以及刷新列表方法
   1.2 按钮组
       1.2.1 常规化按钮组
           (1) 顶部status状态是否展示状态名称状态索引点击事件后方法的回调
           (2) 特殊按钮组是否展示自定义按钮组样式模块按钮组种是否含有其他展示数据
       1.2.2 按钮组合并为统一组件
           (1) 合并的兼容效果
           (2) 合并后的展示优先级
2. 表格组件
   2.1 表头模块
       2.1.1 常规化表头
           (1) 表头背景色表格高度表格宽度表格统一样式是否可合并表头表格是否展示斑马纹表格斑马纹的颜色表格是否展示分割线表格鼠标悬浮色
   2.2 表格模块
       2.2.1 多形态表格
           (1) 表格是否支持多选单选
           (2) 表格是否展示索引列
           (3) 表格种多状态判断问题
           (4) 表格种多类型事件
           (5) 表格多选状态下是否支持保留选中数据以及数据的反显
           (6) 表格多类型判断以及多场景应用
   2.3 表格组件参数认
       2.3.1 必传参数
           (1) 表格的数据
           (2) 表格高度
           (3) 表格展示数据与相关的资源
           (4) 当前数据的总条数以及刷新列表的方法
       2.3.2 非必传参数以及默认值
           (1) loading 默认值为false
           (2) 是否展示斑马纹 true
           (3) 是否展示表格分割线 true
           (4) 表格基础属性动态基础表格
           (5) 表格是否展示多选单选框 false
           (6) 表格展示多选单选框是否支持数据保留以及反显 true
           (7) 父组件方法调用单一传 emit 方式仅传一次通过父组件的表格不通参数与索引在父组件种做区分以及方法调用
           (8) 表格宽度 100%
           (9) 表格在展示的自定义模块不同状态的展示
           (10) 是否展示分页 true
           (11) 是否展示按钮组 false
           (12) 按钮组展示数据

二.组件封装的实现

1.html部分

<template>
    <el-table ref="multipleTableRef" v-loading="loading" :border="true" :data="tableData" stripe @row-click="changeClickRow"
        :row-key="getRowKeys" @selection-change="selectionChange" :height="tableHeight + 'vh'">
        <el-table-column v-if="selectVisible" :reserve-selection="true" align="left" type="selection" width="45" />
        <template v-for="(column, index) in tableColumn" :key="index">
            <!-- 单图展示模块 -->
            <el-table-column v-if="column.type === 'image'" v-bind="setAttrs(column)">
                <template #default="scope">
                    <el-image v-if="scope.row.image != '' && scope.row.image != null" :src="getImage(scope.row.image)"
                        style="width: 70px;height: 70px;"></el-image>
                    <el-image v-else style="width: 70px;height: 70px;" :src="defaultImage"></el-image>
                </template>
            </el-table-column>
            <!-- 多图展示模块 -->
            <el-table-column v-if="column.type === 'images'" v-bind="setAttrs(column)">
                <template #default="scope">
                    <div v-if="scope.row.image != '' && scope.row.image != null">
                        <el-image v-for="item in scope.row.image.split(',')" :src="getImage(item.image)"
                            style="width: 70px;height: 70px;"></el-image>
                    </div>
                    <el-image v-else style="width: 70px;height: 70px;" :src="defaultImage"></el-image>
                </template>
            </el-table-column>
            <!-- 自定义展示模块 -->
            <el-table-column v-if="column.render" v-bind="setAttrs(column)" show-overflow-tooltip>
                <template #default="scope">
                    <Render :column="column" :index="scope.$index" :render="column.render" :row="scope.row"
                        v-bind="$attrs" />
                </template>
            </el-table-column>
            <!-- 带索引展示模块 -->
            <el-table-column v-else-if="column.type === 'index'" type="index" v-bind="setAttrs(column)" width="50" />
            <!-- 多文字展示模块 -->
            <el-table-column v-else :key="column.prop" show-overflow-tooltip v-bind="setAttrs(column)" />
        </template>
    </el-table>
    <v-paging v-if="isVPaging" :pagesize="querys.limit" :total="dataCount" :options="querys" :render="getList"></v-paging>
</template>

2.TS部分

<script setup lang="ts">

/// 依赖组件引用模块
// 默认图片
import defaultImage from '@/assets/logo.png'

// 分页组件
import vPaging from '@/components/paging/index.vue'
// vue
import { reactive } from 'vue';
// render
import Render from './render'
import { getImage } from '@/api/index/api';
/// 父组件参数传递模块

const props = defineProps({
    // 表格数据
    tableData: {
        type: Array<any>,
        default: true,
    },
    // 表格高度
    tableHeight: {
        type: Number,
        default: true
    },
    // 表格渲染资源
    tableColumn: {
        type: Array<any>,
        default: () => [],
    },
    // 列表总条数
    dataCount: {
        type: Number,
        default: true,
    },
    // 列表每页多少条
    dataPage: {
        type: Number,
        default: 20,
    },
    // loading状态
    loading: {
        type: Boolean,
        default: false,
    },
    // 是否展示分页
    isVPaging: {
        type: Boolean,
        default: true,
    },
    // table组件的属性设置
    tableAttr: {
        type: Object,
        default: () => ({
            border: true,
        }),
    },
    // 是否可选择行
    selectVisible: {
        type: Boolean,
        default: false,
    },

    // 多选  单选
    // 参数值为true 为多选 false 为单选
    multipleChange: {
        type: Boolean,
        default: true
    }

});


const querys = reactive({//配置对应的查询参数
    appTimeStart: '',
    appTimeEnd: '',
    page: 1,
    limit: useVModel(props, 'dataPage').value
});


/// 父组件方法调用模块

const emit = defineEmits(['selectionChange', 'getList'])

const multipleChange = useVModel(props, 'multipleChange')

const selectVisible = useVModel(props, 'selectVisible')

// 给元素设置属性
const setAttrs = (params) => {
    const { ...options } = params
    if (!options.align) {
        options.align = 'center'
    }
    return { ...options }
}
// 复选框
const selectionChange = (selections: any) => {
    /**
     * 这里需要注意我们在复选框中本来是不支持单选的我们选择使用了手动更新的办法去将复选变为单选
     * 不过状态的更新并不影响我们组件的使用以及参数的回调
     */
    multipleSelect.value = selections
    if (multipleChange.value == true) {
        emit('selectionChange', multipleSelect.value)
    } else {
        if (multipleSelect.value.length > 1) {
            multipleTableRef.value.toggleRowSelection(multipleSelect.value[0], false)
        }
        emit('selectionChange', multipleSelect.value[multipleSelect.value.length - 1])
    }
}

// 行点击事件
const changeClickRow = (row: any) => {
    /**
     * 这里需要注意  我们的行单点事件并不能直接触发我们的select选择事件 所以需要增减判断去手动更新表格中的select状态
     * 更加注意的是我们事件触发机制是建立在selectVisible为true的前提下的
    */
    if (selectVisible.value == false) return false;
    if (multipleSelect.value != undefined && multipleSelect.value.length != 0) {
        multipleSelect.value.map((item: any, index: number) => {
            if (item.id == row.id) {
                multipleTableRef.value.toggleRowSelection(multipleSelect.value[index], false)
            } else {
                multipleTableRef.value.toggleRowSelection(row, true)
            }
        })
    } else {
        multipleTableRef.value.toggleRowSelection(row, true)
    }
    if (multipleChange.value == true) {
        emit('selectionChange', multipleSelect.value)
    } else {
        if (multipleSelect.value.length > 1) {
            multipleTableRef.value.toggleRowSelection(multipleSelect.value[0], false)
        }
        emit('selectionChange', multipleSelect.value[multipleSelect.value.length - 1])
    }
}

// 表格切换来回数据反显
const getRowKeys = (row: any) => {
    return row.id
}

// 展示分页  数据刷新模块
const getList = () => {
    let params = {
        page: querys.page,
        rows: querys.limit
    }
    emit('getList', params)
}


/// 变量定义模块
const multipleTableRef = ref()

// 行选中的数据
const multipleSelect = ref<Array<any>>()

</script>

3.引用页面部分

（1）引用html部分

<tempTable ref="tableRef" :tableColumn="columns" :loading="loading" @get-list="getList"             
            :tableHeight="63" dataCount="pageTotal" :tableData="tableData">
</tempTable>

（2）逻辑模块

<script lang="tsx" setup>
import tempTable from "@/components/table/tempTable.vue"
import { ElButton, ElTag } from 'element-plus';

const tableRef = ref()

const columns = ref<Array<any>>([
    {
        label: '编号',
        width: 50,
        type: 'index',
        align: 'center'
    },
    {
        label: '服务时间', prop: 'reserve_time', render(props) {
            let { row } = props
            let reserve_time = row.reserve_time
            return reserve_time.replace('T', ' ')
        }
    },
    { label: '回访人员', prop: '_cuser' },
    {
        label: '回访状态', prop: 'status',
        render(props) {
            const { row } = props
            let status = row._status
            let srcHtml = null
            if (row.visit_result == 'X3WVP7B2A') {
                if (row.status == 'X3WUCWYUU') {
                    srcHtml = <ElTag style="color: #880DE2;font-size:14px;">{status}</ElTag>
                }
                if (row.status == 'X3WUCWYUT') {
                    srcHtml = <ElTag style="color: #69CFE2;font-size:14px;">{status}</ElTag>
                }
                if (row.status == 'X3WUCWYUS') {
                    srcHtml = <ElTag style="color: #f00;font-size:14px;">{status}</ElTag>
                }
                if (row.status == 'X3WUCWYUR') {
                    srcHtml = <ElTag style="color: #0099ff;font-size:14px;">{status}</ElTag>
                }
            }
            if (row.visit_result != 'X3WVP7B2A') {
                srcHtml = <ElTag style="color: #f00;font-size:14px;">{status}</ElTag>
            }
            return srcHtml
        },
    },
    {
        label: '单据类型', prop: '_order_type',
        render(props) {
            const { row } = props
            let order_type = row._order_type
            let srcHtml = null
            if (row.order_type == 'X3QQN8P5M') {
                srcHtml = <ElTag style="color: #0099ff;font-size:14px;">{order_type}</ElTag>
            }
            if (row.order_type == 'X3QQN8P5N') {
                srcHtml = <ElTag style="color: #FDD143;font-size:14px;">{order_type}</ElTag>
            }
            if (row.order_type == 'X3QQN8P5O') {
                srcHtml = <ElTag style="color: #3CC1D9;font-size:14px;">{order_type}</ElTag>
            }
            if (row.order_type == 'X3QQN8P5P') {
                srcHtml = <ElTag style="color: #FE9023;font-size:14px;">{order_type}</ElTag>
            }
            return srcHtml
        },
    },
    { label: '服务电话', prop: 'customer_phone' },
    { label: '服务地址', prop: 'address' },
    {
        label: '服务技师', prop: '_serve_user_id',
        render(props) {
            const { row } = props
            let orga = row._serve_orga_id
            let user = row._serve_user_id
            return <span style="font-size:14px;">{orga} {user}</span>
        },
    },
    {
        label: '操作',
        render(props) {
            const { row } = props
            return <ElButton link type="primary" onClick={() => visitDetailRef.value.openDialog(row)} >查 看</ElButton>
        },
    }
])

4.render.ts 模块代码

export default {
    props: {
      row: Object,
      render: Function,
      index: Number,
      column: {
        type: Object,
        default: null,
      },
    },
    setup: function (props: any, context: any) {
      return () =>
        props.render({
          ...props,
          ...context.attrs,
        })
    },
  }

三.模块详细说明

1.为什么不使用v-model双向绑定进行分页的数据传输

在封装的过程中发现既然封装了为什么不干脆一封到低呢？我们将原有的分页一起丢进table组件中我们在进行请求的时候仅仅只需要获取到当前的页数，条数就可以没有必要将其他多余的参数进行变量声明，我们在切换分页的时候只需要拿参数就可以了，在初始化请求中我们将我们的默认参数进行赋值这样就不会出现拿到的参数是空的状态

2.如何将JSX与TS在一起使用

我在使用的过程中发现如果<script lang="tsx" setup> lang="ts"时我们的代码行就会提示报错所以我新增加了@vitejs/plugin-vue-jsx 这个依赖安装命令如下

npm install --save-dev @vitejs/plugin-vue-jsx

接着就是配置模块了

在vite.config.ts中导入以下代码

import vueJsx from '@vitejs/plugin-vue-jsx'

然后在plugins中将vueJsx()写入这样我们的JSX与TS配置就好了，还得注意的一点就是使用模块的script标签中 lang的值为tsx

四.总结

组件的封装不是说为了封装而封装、我们在封装的过程中还是要以实际的项目需求为基础、封装的过程中需要注意思考为什么要这样或者那样封装。后续如果出现新的更改我还是会一点点改过来。

最后欢迎各位路过大佬的指正和批评，你们的批评与指正将会是我最大的动力！！！