QilinTable组件

QilinTable组件是一个基于element-plus的表格组件，封装了常用的功能，如分页、排序、筛选、多选、列隐藏、列固定、列合并、列分组、列排序。

基本使用

<template>
    <QilinTable v-model:tableConfig="tableConfig" @changeCurrentPage="changeCurrentPage"
        @changeCurrentSize="changeCurrentSize" @sortChangeData="sortChange" ref="tableConfigRef"
        @selectionChangeData="selectionChangeData" @rowClickData="rowClickData"
        @rowDblClickData="rowDblClickData"
    >
        <template v-slot:project="slotData">
            <span>{{slotData.data.scope.row.project.join("、")}}</span>
        </template>
        <template v-slot:elTableColumn="slotData">
            <el-table-column :label="slotData.data.item.label" :prop="slotData.data.item.prop" 
                :align="slotData.data.item.align" :width="slotData.data.item.width">
                <span>EDGQilin</span>
            </el-table-column>
        </template>
        <template v-slot:elTableHeader="slotData">
            <div style="display:flex;align-items:center;">
                <el-tooltip effect="dark" placement="top" content="这是一个自定义表头">
                    <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
                <span style="display:inline-block;margin-left:3px;">{{slotData.data.item.label}}</span>
            </div>
        </template>
    </QilinTable>
</template>
<script setup>
import {reactive,ref} from "vue";
// 切换页码事件监听
const changeCurrentPage=(page)=>{
    console.log(page);
    tableConfig.paginationsObj.currentPage=page;
};
// 切换页码事件监听
const changeCurrentSize=(size)=>{
    console.log(size);
    tableConfig.paginationsObj.pageSize=size;
};
// 多选事件监听
const selectionChangeData=(selection)=>{
    console.log(selection);
};
// 排序事件监听
const sortChange=(data)=>{
    console.log(data);
};
// 行单击事件监听
const rowClickData = (row)=>{
    console.log(row);
};
// 行双击事件监听
const rowDblClickData = (row)=>{
    console.log(row);
};

const tableConfig=reactive({
    elTableConfig:{
        border:true,
        stripe:true,
        defaultExpandAll:true,
        rowKey:"salary",
        cellStyle:({row,column,rowIndex,columnIndex})=>{
            // console.log(row,column,rowIndex,columnIndex);
            if(rowIndex === 3 && columnIndex === 2){
                return {
                    "font-weight":"bolder"
                }
            }
        }
    },
    headerConfig:[
        {
            type:"checkbox",
            width:60
        },
        {
            label:"序号",
            type:"sortIndex",
            width:60
        },
        {
            label:"姓名",
            prop:"name",
            type:"text",
            headerSlot:true,
            ellipsis:true,
            width:80
        },
        {
            label:"头像",
            prop:"avatar",
            type:"image",
            width:100,
            imageConfig:{
                ip:"",
                isPreview:false
            }
        },
        {
            label:"出生日期",
            prop:"birthday",
            type:"date",
            format:"chinese",
            sortable:"custom",
            ellipsis:true,
            width:150
        },
        {
            label:"项目",
            prop:"project",
            type:"slot",
            slotName:"project",
            ellipsis:true,
            // tooltipOptions:{
            //     content:"这是我的项目",
            //     placement:"top"
            // },
            width:200
        },
        {
            label:"公司",
            type:"multiple",
            children:[
                {
                    label:"名称",
                    prop:"companyName",
                    type:"text",
                    ellipsis:true,
                    width:160
                },
                {
                    label:"年限",
                    prop:"time",
                    type:"text",
                    width:100
                },
                {
                    label:"职务",
                    prop:"position",
                    type:"text",
                    width:100
                },
                {
                    label:"薪资",
                    prop:"salary",
                    type:"text",
                    width:100
                }
            ]
        },
        {
            label:"昵称",
            prop:"nickName",
            type:"customOperate",
            align:"center",
            width:100
        },
        {
            label:"操作",
            type:"operate",
            fixed:"right",
            hideSeparate:true,
            width:280,
            operateOptions:[
                {
                    btnName:"抽屉",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                        drawerConfig.isShow=true;
                    }
                },
                {
                    btnName:"删除",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                    }
                }
            ],
            moreOperateOptions:[
                {
                    btnName:"编辑",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                    }
                },
                {
                    btnName:"删除",
                    btnType:"primary",
                    btnSize:"default",
                    text:true,
                    btnClick:(row,item,scope,optItem)=>{
                        console.log(row,item,scope,optItem);
                    }
                }
            ]
        }
    ],
    tableData:[
        {
            name:"Qilin",
            avatar:[
                {
                    fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                }
            ],
            birthday:"1996-05-12",
            project:["戒毒所","看守所","拘留所","安康医院"],
            companyName:"南京冠霆智能科技有限公司",
            time:"8个月",
            position:"前端开发",
            salary:7000
        },
        {
            name:"Qilin",
            avatar:[
                {
                    fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                }
            ],
            birthday:"1996-05-12",
            project:["SDP零信任项目","动态应用安全防护系统BSG"],
            companyName:"亚信智网有限公司",
            time:"13个月",
            position:"前端开发",
            salary:9500
        },
        {
            name:"Qilin",
            avatar:[
                {
                    fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                }
            ],
            birthday:"1996-05-12",
            project:["云上贵州项目","红花街道h5项目","温州市党政机关信息化项目"],
            companyName:"苏软科技（南京）有限公司",
            time:"11个月",
            position:"前端开发",
            salary:13000
        },
        {
            name:"Qilin",
            avatar:[
                {
                    fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                }
            ],
            birthday:"1996-05-12",
            project:["U创办公管理系统","U创小程序"],
            companyName:"南京联创智慧科技有限公司",
            time:"22个月",
            position:"前端开发",
            salary:15000,
            children:[
                {
                    name:"Qilin",
                    avatar:[
                        {
                            fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                        }
                    ],
                    birthday:"1996-05-12",
                    project:["U创办公管理系统","U创小程序"],
                    companyName:"南京联创智慧科技有限公司",
                    time:"22个月",
                    position:"前端开发",
                    salary:16000,
                }
            ]
        }
    ],
    paginationsObj:{
        currentPage:1, //当前页
        pageSize:10, //当前每页数量
        pageSizes:[10,20,30], //每页显示多少条选项集
        total:0, //表格总数量
        layout:"total,sizes,prev,pager,next,jumper"
    }
});
</script>

示例：

Props参数

tableConfig object

核心配置项，支持以下参数。

属性名	类型	说明	可选值	默认值
elTableConfig	object	el-table标签上的配置项，详见elTableConfig	-	-
headerConfig	array	表头配置项，详见headerConfig	-	-
tableData	array	真实数据，详见tableData	-	-
paginationObj	object	分页配置项，详见paginationObj	-	-

elFormConfig object

el-table标签上的配置项

属性名	类型	说明	可选值	默认值
border	boolean	是否带边框	true/false	false
stripe	boolean	是否带斑马纹	true/false	false
size	string	表格尺寸	small/medium/large	medium
rowKey	string/function	行数据的 Key，用来优化 Table 的渲染;在使用reserve-selection功能与显示树形数据时，该属性是必填的	-	-
highlightCurrentRow	boolean	是否要高亮当前行	true/false	false
defaultExpandAll	boolean	是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	true/false	false
spanMethod	function	合并行或列的计算方法	({row,column,rowIndex,columnIndex})=>{return number[]或{rowspan:number,colspan:number}}	-
cellStyle	object	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style	({row,column,rowIndex,columnIndex})=>{return CSSProperties} 或 CSSProperties	-
height	string/number	table的高度，默认100%;如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。	-	-

headerConfig array

表头相关配置项

属性名	类型	说明	可选值	默认值
label	string	表头名称	-	-
prop	string	对应后台数据的字段名	-	-
type	string	表头字段的类型；slot和customOperate类型只能用在表格的第一层，多级表头下使用不生效	checkbox / sortIndex / text / date / slot / operate / customOperate / multiple	text
isHide	boolean	是否隐藏某个表头	true/false	false
isHideFn	function	是否隐藏某个表头，返回false则隐藏	(item)=>{return true/false}	-
replaceValue	string	值为空的替代符，当后台数据值为null或undefined时生效	-	-
headerSlot	boolean	是否自定义表头插槽，当且仅当type为text时生效	true/false	false
slotName	string	slot插槽元素的name，当且仅当type为slot时生效	-	-
fixed	string/boolean	列是否固定在左侧或者右侧。 true 表示固定在左侧	left/right/true/false	false
format	string	日期时间格式化设置，具体配置项请参考QilinUtils工具库中Date方法中的formatDate()方法	-	yyyy-MM-dd hh:mm:ss
align	string	对齐方式	left/center/right	center
width	string/number	列的宽度	-	-
minWidth	string/number	对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列	-	-
ellipsis	boolean	当内容过长被隐藏时显示 tooltip	true/false	false
tooltipOptions	object	超出悬浮展示的配置项，优先级高于ellipsis	{content:string,placement:string}	-
isShowExpandTooltip	boolean	是否开启展开行功能	true/false	false
expandTooltipFn	function	展开行内容方法，内容有方法返回，须配合isShowExpandTooltip一起使用	(row,item)=>{}	-
hideSeparater	boolean	是否隐藏操作按钮之间的分隔符	true/false	false
operateOptions	array	操作栏按钮配置项，当且仅当type为operate时生效；支持el-button的其余属性，可直接添加，详见operateOptions	-	-
moreOperateOptions	array	操作栏按钮更多配置项，当且仅当type为operate时生效；支持el-button的其余属性，可直接添加；其下配置同operateOptions一致	-	-

operateOptions object

操作栏按钮配置项。

配置项	类型	说明	可选值	默认值
btnName	string	按钮名称	-	按钮
btnType	string	按钮类型	primary/success/warning/danger/info/text	default
btnSize	string	按钮尺寸	small/default/large	default
isHide	boolean	是否隐藏按钮	true/false	false
isHideFn	function	是否隐藏改按钮的方法，优先级低于isHide	(row,item,optItem)=>{return true/false}	-
disabled	boolean	是否禁用按钮	true/false	false
isDisabled	function	是否禁用按钮的方法	(row,item)=>{return true/false}	-
iconfontClass	string	当使用自定义图标时的class类名，需自行引入相关的iconfont图标库	-	-
btnClick	function	按钮点击事件	(row,item,scope,optItem)=>{}	-

tableData array

真实数据，格式为对象数组，将后台的数据赋值给该属性即可。

paginationObj object

表格分页配置项。

配置项	类型	说明	可选值	默认值
isHide	boolean	是否隐藏分页	true/false	false
currentPage	number	当前页数	-	1
pageSize	number	每页显示多少条数据	-	10
pageSizes	array	每页显示多少条数据可选项	-	[10,20,30]
total	number	数据总量	-	0
layout	string	分页布局	-	total, sizes, prev, pager, next, jumper

Events

组件的暴露事件。

事件名	类型	参数	说明
changeCurrentPage	function	page	当前页码切换时触发的事件
changeCurrentSize	function	size	当前每页数量切换时触发的事件
selectRowData	function	selection,row	当用户手动勾选数据行的 Checkbox 时触发的事件
selectAllRowData	function	selection	当用户手动勾选全选 Checkbox 时触发的事件
selectionChangeData	function	newSelection	当选择项发生变化时会触发该事件
rowClickData	function	row,column,event	当某一行被点击时会触发该事件
rowDblClickData	function	row,column,event	当某行被双击时会触发该事件
expandChangeData	function	row,expandedRows\expanded	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）
currentChangeData	function	currentRow,oldCurrentRow	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开highlightCurrentRow属性
sortChangeData	function	data	当表格的排序条件发生变化的时候会触发该事件

Exposes

组件的暴露方法。

方法名	类型	参数	说明
setCurrentRow	function	row	用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。
toggleRowSelection	function	row,expanded:boolean	用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。
clearSelection	function		用于多选表格，清空用户的选择
toggleRowSelection	function	row,selected:boolean	用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则可直接设置这一行选中与否
toggleAllSelection	function		用于多选表格，切换全选和全不选
sort	function	prop,order	用于手动排序表格

Slots

组件的插槽。

插槽名	数据值	说明
{item.slotName}	data:{scope,item}	设置headerConfig配置项中的type为slot即可使用，用于需要对表格某列数据进行特殊处理的需求，其中设置的slotName属性值就是该插槽名
elTableColumn	data:{item}	当需要自定义操作栏列时用该插槽代替
elTableHeader	data:{item}	当需要自定义表头时用该插槽代替，此时须配合headerSlot属性使用