分享一款基于vue3、Element Plus和TypeScript的多功能列表组件vue3-vuecmf-table。支持树形列表数据展示，内置搜索、筛选、分页、行展开、详情、编辑、导出和导入EXCEL等功能。
效果展示：
使用文档：
组件 | VueCMF基于vue3、element plus、typescript开发的vuecmf相关组件：vue-vuecmf-dialog弹窗组件、vue-vuecmf-editor富文本编辑器、vue3-vuecmf-table多功能列表组件。
http://www.vuecmf.com/components/#vue3-vuecmf-table
安装
yarn add vue3-vuecmf-table导入组件
1、基础功能导入：
import { createApp } from 'vue'
import App from './App.vue'
/*导入vuecmf table组件*/
import VuecmfTable from "vue3-vuecmf-table"
createApp(App).use(VuecmfTable).mount('#app')2、完整功能导入：
import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
/*导入表单中的依赖组件vuecmf editor和vuecmf dialog*/
import VuecmfEditor from 'vue-vuecmf-editor'
import VuecmfDialog from 'vue-vuecmf-dialog'
/*导入vuecmf table组件*/
import VuecmfTable from "vue3-vuecmf-table"
createApp(App).use(VuecmfTable).use(VuecmfEditor).use(VuecmfDialog).mount('#app')模板中使用
1、基础功能使用方法
<template>
<h3>vuecmf-table demo</h3>
<vuecmf-table
export_file_name="相册管理列表"
server="http://www.vuecmf.com/vuecmf/photo"
>
</vuecmf-table>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: 'App',
});
</script>2、完整功能使用方法：
<template>
<h3>vuecmf-table demo</h3>
<vuecmf-table
export_file_name="相册管理列表"
:selectable="selectable"
:checkbox="true"
:token="token"
:detail_btn_visible="detailBtnVisible"
:add_btn_visible="true"
:edit_btn_visible="editBtnVisible"
:del_btn_visible="delBtnVisible"
:expand_action="true"
server="http://www.vuecmf.com/vuecmf/photo"
import_server="http://www.vuecmf.com/vuecmf/photo/saveAll"
save_server="http://www.vuecmf.com/vuecmf/photo/save"
upload_server="http://www.vuecmf.com/vuecmf/upload"
del_server="http://www.vuecmf.com/vuecmf/photo/delete"
@beforeLoadTable="beforeLoadTable"
@afterLoadTable="afterLoadTable"
>
<!-- 表格头部左边 自定义按钮操作 -->
<template #headerAction="selectRows">
<el-button size="default" type="danger" @click.prevent="mulDel(selectRows)" >批量删除</el-button>
</template>
<!-- 列表每行 自定义按钮操作 -->
<template #rowAction="{ row, index, service}">
<el-button size="default" type="info" @click.prevent="lock(row, index, service)">禁用</el-button>
</template>
<!-- 每行中的每个字段内容 自定义格式化内容显示： 可获取参数有 { row, field } -->
<template #formatRow="{ row, field }">
<span v-if=" field == 'username' ">
<el-input v-model="row[field]" @change="changeUser" size="default" clearable></el-input>
</span>
</template>
<!-- 行展开 自定义格式-->
<template #rowExpand="{ row, index }">
<div :key="k" v-for="(item,k) in row.expand_data.table_list">
{{ item.col01 }} {{ item.col02 }} {{ index }}
</div>
</template>
</vuecmf-table>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
name: 'App',
setup(){
const token = '961f4f941f9ecba1fd2197c09b41b101'
const selectable = (row: any, index: number):boolean => {
if(typeof row.username != 'undefined' && index > 0){
//为true则行可勾选
return true
}else{
return false
}
}
//表格头部左边 添加 按钮操作
const add = (rows:any):void => {
Object.keys(rows).forEach((key) => {
console.log(rows[key])
})
}
//行 禁用 按钮操作, row = 行数据， index = 行索引， service = 组件的服务类实例
const lock = (row:any, index:number, service: any):void => {
console.log(row, index)
service.delRow() //调用组件中的服务类实例中方法
console.log('service = ', service)
}
//行中输入框修改事件
const changeUser = (val:string):void => {
console.log('修改后值=', val)
}
//表格数据加载前回调函数，作用是将 表格组件中的服务类实例暴露出来，便于操作表格数据
const beforeLoadTable = (tableService:any) => {
console.log('表格组件中service类实例g', tableService)
//设置表单中组件的change事件回调函数， 例如在联动下拉框中使用
tableService.import_config.changeEvent = (form_field_name: string, sel_val: string|Array<string|number>, linkage: any):void => {
console.log('form_field_name=', form_field_name)
console.log('sel_val=', sel_val)
console.log('linkage=', linkage)
}
}
//表格字段加载完后
const afterLoadTable = (table_config: any) => {
console.log(table_config)
}
//是否显示行详情按钮, 默认true
const detailBtnVisible = (row: any): boolean => {
console.log('row', row)
return true
}
//是否显示行编辑按钮，默认true
const editBtnVisible = (row: any): boolean => {
console.log('row', row)
return true
}
//是否显示行删除按钮，默认true
const delBtnVisible = (row: any): boolean => {
console.log('row', row)
return true
}
return {
token,
selectable,
add,
lock,
changeUser,
beforeLoadTable,
afterLoadTable,
detailBtnVisible,
editBtnVisible,
delBtnVisible
}
}
});
</script>
后端API示例
1、基础功能API示例
// 1. 列表字段信息示例
{
"data":{
"field_info":[
{
"filter":true, //列头是否显示过滤器
"fixed":false, //是否固定列
"label":"表名", //列头标题
"prop":"table_name", //列字段名
"show":true, //是否在列中显示
"sortable":true, //列是否可排序
"tooltip":"模型对应的表名(不含表前缘)", //列提示说明
"width":150 //列宽度
},
......
]
},
"msg":"",
"code":0
}
// 2. 列表数据示例
{
"data":{
"total":15, //总条数
"per_page":20, //每页显示条数
"current_page":1, //当前页码
"last_page":1, //最后页码
"data":[
//每行的数据
{
"id":15,
"table_name":"photo",
"label":"我的相册",
"component_tpl":"template\/content\/List",
"default_action_id":89,
"search_field_id":"116",
"type":20,
"is_tree":20,
"remark":"我的相册",
"status":10
},
......
]
},
"msg":"拉取成功",
"code":0
}2、完整功能API示例
// 1. 列表字段信息示例
{
"data":{
//列表字段信息
"field_info":[
{
"field_id":2, //字段ID
"prop":"table_name", //字段名
"label":"表名", //字段标题名
"width":150, //列表列宽度
"length":64, //字段长度
"show":true, //是否显示该列
"fixed":false, //是否固定该列
"filter":true, //是否显示搜索表单
"tooltip":"模型对应的表名(不含表前缘)", //列提示
"model_id":1, //模型ID
"sortable":true //是否可排序
},
......省略其它字段信息
],
//表单信息
"form_info":{
"17":{
"field_id":2,
"field_name":"table_name",
"label":"表名",
"type":"text",
"default_value":"",
"is_disabled":20,
"sort_num":17
},
............省略其它表单信息
},
//字段选项（表单中使用）
"field_option":{
//字段ID
"7":{
"10":"内置",
"20":"扩展"
},
......省略其它字段选项信息
},
"relation_info":{
//表单联动
"linkage":{
//字段ID
"2":{
"5":{
"relation_field_id":5, //关联字段ID
"action_table_name":"model_action", //关联表名
"action_type":"dropdown" //关联动作类型
},
"6":{
"relation_field_id":6,
"action_table_name":"model_field",
"action_type":"dropdown"
}
}
},
//字段选项，用于渲染列表数据
"full_options":{
//字段ID
"5":[
{
"label":"模型管理列表", //列表渲染后的值
"id":1 //列表值
},
......省略其它字段选项信息
],
},
//字段选项（表单中使用）
"options":{
//内容结构同 full_options， 这里在full_options基础上筛选出当前表单的字段选项列表
}
},
//表单验证
"form_rules":{
//字段名
"table_name":[
{
"required":true, //验证规则
"message":"表名必填", //验证提示
"trigger":"blur" //触发方式
}
]
},
//模型ID
"model_id":1
},
"msg":"拉取成功",
"code":0
}
// 2. 列表数据示例
{
"data":{
"total":15, //总条数
"per_page":20, //每页显示条数
"current_page":1, //当前页码
"last_page":1, //最后页码
"data":[
//每行的数据
{
"id":15,
"table_name":"photo",
"label":"我的相册",
"component_tpl":"template\/content\/List",
"default_action_id":89,
"search_field_id":"116",
"type":20,
"is_tree":20,
"remark":"我的相册",
"status":10
},
......
]
},
"msg":"拉取成功",
"code":0
}
以上是简要介绍，具体的组件属性、插槽及事件说明，可查阅使用文档。
39
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
