vue3-vuecmf-table

介绍

vue3-vuecmf-table是一款基于vue3、Element Plus和TypeScript的多功能列表组件,支持树形列表数据,内置搜索、筛选、分页、行展开、详情、编辑、导出和导入EXCEL等功能。

DownloadsVersionLicense

项目托管地址:

  1. Github: https://github.com/vuecmf/vue3-vuecmf-tableopen in new window
  2. Gitee: https://gitee.com/emei/vue3-vuecmf-tableopen in new window

演示

安装

yarn add vue3-vuecmf-table
npm install vue3-vuecmf-table

使用

导入组件

在项目的main.ts 文件中导入组件,如下

import { createApp } from 'vue'
import App from './App.vue'

/*导入vuecmf table组件*/
import VuecmfTable from "vue3-vuecmf-table"

createApp(App).use(VuecmfTable).mount('#app')

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')

模板中使用

若你只需要列表展示、搜索及导出数据,无需表单及增删等按钮,可以使用下面“基础功能”方式使用。

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

<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. 列表字段信息示例
{
   "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
}

// 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
}

属性

属性必须说明类型可选值默认值
server加载列表数据的后端API链接,必须string-
save_server保存单条数据的后端API链接,若add_btn_visible属性为true或edit_btn_visible属性返回true时,此属性必须string-
import_server导入数据的后端API链接,若列表需要批量导入数据时,此属性必须string-
del_server删除行数据的后端API链接,若del_btn_visible属性返回true时,此属性必须string-
upload_server文件上传后端API链接,若表单中包含有上传文件控件时,此属性必须string-
token后端需要的token信息string-
page当前页码的参数名string-page
limit每页显示条数number-20
height列表表格高度string-300px
size列表中的按钮及表单样式大小stringlarge, default, smalldefault
operate_width操作列的宽度, 若行中有操作按钮,此值必须大于0,否则 操作列不显示number-0
detail_btn_visible是否显示行详情按钮 , 默认不显示function-(select_row: AnyObject) => false
add_btn_visible是否显示新增按钮 , 默认不显示boolean-false
edit_btn_visible是否显示行编辑按钮 , 默认不显示function-(select_row: AnyObject) => false
del_btn_visible是否显示行删除按钮 , 默认不显示function-(select_row: AnyObject) => false
checkbox是否显示行选择复选框boolean-false
expand是否显示行展开功能boolean-false
selectable行是否可以选择的回调函数function-() => true
load_form表单加载前的回调函数function-(tableService: AnyObject, select_row: AnyObject) => Promise.resolve(true)
row_key树形数据唯一键字段,列表数据为树形时(即包含 children 字段时)此项必须string-
default_expand_all列表数据为树形时(即包含 children 字段时)是否全部展开boolean-true
export_file_name列表数据导出的文件名称string-当前日期
expand_action每行的操作按钮是否展开显示boolean-true
form_dialog_width表单弹窗的宽度string-50%

插槽

插槽在模板中的具体使用,请参考“模板中使用”中的“完整功能

插槽名说明
headerAction表格头部左边的自定义按钮操作
rowAction列表每行操作列的按钮操作自定义
formatRow每行中的每个字段内容 自定义格式化内容显示: 可获取参数有 { row, field },row=当前行数据,field=字段名
rowExpand行展开 自定义显示内容,可获取参数有 { row, index } row=当前行数据,index=行索引号

事件

事件名说明参数
exception列表加载数据异常事件msg 异常信息
beforeLoadTable列表表格数据加载前的回调tableService 列表服务类对象
afterLoadTable列表表格数据加载完后的回调table_config 列表配置对象

vue-vuecmf-dialog

介绍

vue-vuecmf-dialog弹窗组件是基于vue3、Element Plus和TypeScript构建,支持最大化、最小化、还原及弹窗主体内容自适应屏幕功能。

DownloadsVersionLicense

项目托管地址:

  1. Github: https://github.com/vuecmf/vue-vuecmf-dialogopen in new window
  2. Gitee: https://gitee.com/emei/vue-vuecmf-dialogopen in new window

演示

安装

yarn add vue-vuecmf-dialog
npm install vue-vuecmf-dialog

使用

导入组件

然后在项目的main.ts 引入,如下

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'

/*导入组件*/
import VuecmfDialog from "vue-vuecmf-dialog"

createApp(App).use(VuecmfDialog).mount('#app')

模板中使用

<template>
  <h3>vue-vuecmf-dialog demo</h3>
  <el-button 
      size="default" 
      type="primary" 
      @click=" showDlg = true " >打开对话框</el-button>
  
  <vuecmf-dialog 
      :model_value="showDlg" 
      title="标题"  
      @updateVisible="updateVisible"  
      @close="close" 
      @toggleScreen="toggleScreen">

    <template #content>
      <div> 这是一个可以最大化、最小化及还原的 对话框</div>
    </template>

    <template #footer>
      <el-button type="primary" @click=" showDlg = false ">关闭</el-button>
    </template>

  </vuecmf-dialog>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  setup(){
    const showDlg = ref()
    showDlg.value = false

    const updateVisible = (val:any) => {
      console.log('val=', val)
      showDlg.value = val
    }

    const close = ():void => {
       console.log('dialog closed!')
    }
    
    const toggleScreen = (is_max: boolean):void => {
       console.log('dialog is max:', is_max)
    }

    return {
     showDlg,
     updateVisible,
     close,
     toggleScreen
    }
  }
});
</script>

属性

属性必须说明类型可选值默认值
title对话框标题,支持htmlstring-
max_screen是否全屏显示bool-false
width对话框宽度string-50%
top对话框顶部相对于窗口的偏移距离string-15vh
model_value是否显示对话框bool-false
custom_classDialog 的自定义样式类名string-
close_on_click_modal是否可以通过点击 modal 关闭 Dialogbool-false
close_on_press_escape是否可以通过按下 ESC 关闭 Dialogbool-true
show_close是否显示关闭按钮bool-true
scroll_top每次打开弹窗是否滚动到弹窗头部位置bool-true
modal是否显示遮罩层bool-true
append_to_bodyDialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 truebool-false

事件

事件名说明参数
openDialog 打开时的回调-
openedDialog 打开后的回调-
closeDialog 关闭的回调-
closedDialog 关闭后的回调-
updateVisible弹窗关闭时,重置为弹窗不显示-
toggleScreen弹窗最大化及还原时的回调is_max: bool值,当前弹窗是否最大化

vue-vuecmf-editor

介绍

vue-vuecmf-editor是一款基于vue3、Element Plus和TypeScript构建的HTML5富文本编辑器。

DownloadsVersionLicense

项目托管地址:

  1. Github: https://github.com/vuecmf/vue-vuecmf-editoropen in new window
  2. Gitee: https://gitee.com/emei/vue-vuecmf-editoropen in new window

演示

安装

yarn add vue-vuecmf-editor
npm install vue-vuecmf-editor

使用

导入组件

然后在项目的main.ts 引入,如下

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'

//导入
import VuecmfEditor from "vue-vuecmf-editor"

createApp(App).use(VuecmfEditor).mount('#app')

模板中使用

<template>
  <h3>vuecmf-editor demo</h3>

  <vuecmf-editor
      id="myeditor"
      :content="contentHtml"
      @on-change="getContent"
  ></vuecmf-editor>
  <button @click="save">保存</button>

</template>


<script lang="ts">
import {defineComponent, ref} from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
  setup(){
    const contentHtml = ref('Hello world!')

    const getContent = (content:string, id: string) => {
      console.log('id=', id)
      contentHtml.value = content
    }

    const save = ():void => {
      alert(contentHtml.value)
    }

    return {
      getContent,
      contentHtml,
      save
    }

  }
});
</script>

属性

属性必须说明类型可选值默认值
id编辑器idstring--
content编辑器内容string-
height编辑器高度string-300px
size编辑器中工具条大小样式stringdefault, large, smalldefault
tools自定义工具条,多个英文逗号分隔。例如 heading,table,codestringheading 标题
align-left 左对齐
align-center 居中对齐
align-right 右对齐
bold 加粗
italic 斜体
underline 下横线
strikethrough 删除线
superscript 上角标
subscript 下角标
quote-left 块引用
link 添加超链接
unlink 取消超链接
font 字体
font-size 字大小
font-color 字体颜色
font-bg-color 文本背景色
indent 增加缩进
outdent 减少缩进
list-ol 有序列表
list-ul 无序列表
select-all 全选
remove-format 清除格式
cut 剪切
copy 复制
hr 插入水平线
table 插入表格
image 插入图片
film 插入视频
code 插入代码
redo 恢复
undo 撤销

事件

事件名说明参数
on-change添加或修改编辑器中的内容时,触发此事件content: 编辑器内容, id: 编辑器ID
Last Updated:
Contributors: emei8