组件 | VueCMF

vue3-vuecmf-table

介绍

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

项目托管地址：

演示

安装

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'
import "bootstrap-icons/font/bootstrap-icons.css" //v1.21+版本需要引入此样式

/*导入表单中的依赖组件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"
      openai_server="http://www.vuecmf.com/web/ai"
      amap_key="高德地图申请的APP KEY"
  >
    <!-- 表格头部左边 自定义按钮操作 -->
    <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,
                "placeholder":"请输入用户名",     //1.25.x版本新增
                "is_edit": true,                 //1.26.x版本新增
                "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	否	列表中的按钮及表单样式大小	string	large, default, small	default
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%
upload_action	否	上传动作函数，主要用于自定义上传组件，如接入外部文件管理器。接收到两个参数：文件信息、字段信息	function	-	-
openai_server	否	AI大模型后端地址（如ChatGPT）,用于表单中的编辑器里的AI生成内容功能用	string	-	-
amap_key	否	高德地图应用KEY,用于表单中的编辑器里的插入地图功能用	string	-	-

插槽

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

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

事件

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

vue-vuecmf-fileexplorer

介绍

vue-vuecmf-fileexplorer文件管理器组件是基于vue3、Element Plus和TypeScript的文件管理器组件，支持文件夹管理、上传及文件管理等功能。

项目托管地址：

演示

安装

yarn add vue-vuecmf-fileexplorer

npm install vue-vuecmf-fileexplorer

使用

导入组件

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

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import VuecmfFileexplorer from "../packages/index"
import "bootstrap-icons/font/bootstrap-icons.css"

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

模板中使用

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

  <vuecmf-fileexplorer
      root_path="uploads"
      :page_size="30"
      list_show="list"
      :tool_config="['new_folder','update_folder','move_folder','del_folder','upload','move_file','del_file']"
      upload_api="http://localhost:8080/web/upload"
      @loadFolder="loadFolder"
      @moveFolder="moveFolder"
      @saveFolder="saveFolder"
      @delFolder="delFolder"
      @loadFile="loadFile"
      @selectFile="selectFile"
      @moveFile="moveFile"
      @delFile="delFile"
      @saveFile="saveFile"
  >
  </vuecmf-fileexplorer>

</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {AnyObject} from "../packages/vue-vuecmf-fileexplorer/src/typings/vuecmf";
//import Model from "../packages/vue-vuecmf-fileexplorer/src/Model";
//import {ElMessage} from "element-plus";

export default defineComponent({
  name: 'App',
  setup(){
    //const token = 'fea47c5084ab8a6e2d3fa004aa19abeb'
    //const api = new Model(token)

    //加载文件夹列表
    const loadFolder = (folderObj: AnyObject):void => {
      console.log(folderObj)
      folderObj.data[0].children = [
        {
          "id": 1,
          "title": "food",
          "pid": 0,
          "children": [
            {
              "id": 4,
              "title": "bread",
              "pid": 1,
              "children": null
            },
            {
              "id": 5,
              "title": "vegetable",
              "pid": 1,
              "children": null
            }
          ]
        },
        {
          "id": 2,
          "title": "hotel",
          "pid": 0,
          "children": null
        }
      ]

    }

    //保存文件夹
    const saveFolder = (folderData: AnyObject):void => {
      console.log(folderData)
    }

    //移动文件夹
    const moveFolder = (data:AnyObject):void => {
      console.log(data)
      //重新加载文件夹列表及文件列表
      data.loadFolder()

    }

    //删除文件夹
    const delFolder = (folderData: AnyObject):void => {
      console.log(folderData)
    }

    //加载文件列表
    const loadFile = (folderObj: AnyObject):void => {
      console.log(folderObj)
      folderObj.total = 16
      folderObj.data = []
      for(let i = 1; i <= 16; i++) {
        folderObj.data.push({
          "id": i,
          "file_name": "hamburger"+i+".png",
          "ext": "png",
          "size": "120kb",
          "dir_id": 4,
          "url": "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          "remark": "",
          "create_time": "2023-05-16 16:13:33",
          "update_time": "2023-05-18 15:17:35",
        })
      }

    }

    //选择文件事件
    const selectFile = (files:AnyObject):void => {
      console.log('当前选择的文件信息：', files)
    }

    //移动文件
    const moveFile = (data:AnyObject):void => {
      console.log(data)
      //重新加载文件列表
      data.loadFile()
    }

    //删除文件
    const delFile = (data:AnyObject):void => {
      console.log(data)
      //重新加载文件列表
      data.loadFile()
    }

    //保存文件
    const saveFile = (data:AnyObject):void => {
      console.log(data)
    }

    return {
      loadFolder,
      saveFolder,
      moveFolder,
      delFolder,
      loadFile,
      selectFile,
      moveFile,
      delFile,
      saveFile
    }
  }
});
</script>

属性

属性	必须	说明	类型	可选值	默认值
root_path	否	当前文件夹根目录，默认uploads	string	-	uploads
page_size	否	每页显示文件数量	number	-	30
list_show	否	文件列表显示方式	string	card/list	card
upload_api	否	上传文件后端API	string	-	空
tool_config	否	工具条功能配置，不加此属性则显示全部功能	array	['new_folder','update_folder','move_folder','del_folder','upload','move_file','del_file']	['new_folder','update_folder','move_folder','del_folder','upload','move_file','del_file']

事件

事件名	说明	参数
loadFolder	加载文件夹列表	文件夹对象信息
moveFolder	移动文件夹	移动的文件夹信息
saveFolder	保存文件夹	保存的文件夹信息
delFolder	删除文件夹	需要删除的文件夹信息
loadFile	加载文件列表	文件对象信息
selectFile	选择文件	选择的所有文件信息
moveFile	移动文件	移动的文件信息
delFile	删除文件	需要删除的文件信息
saveFile	保存文件名等信息	保存的文件信息

vue-vuecmf-dialog

介绍

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

项目托管地址：

演示

安装

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

事件

事件名	说明	参数
open	Dialog 打开时的回调	-
opened	Dialog 打开后的回调	-
close	Dialog 关闭的回调	-
closed	Dialog 关闭后的回调	-
updateVisible	弹窗关闭时，重置为弹窗不显示	-
toggleScreen	弹窗最大化及还原时的回调	is_max: bool值，当前弹窗是否最大化

vue-vuecmf-editor

介绍

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

项目托管地址：

演示

安装

yarn add vue-vuecmf-editor

npm install vue-vuecmf-editor

使用

导入组件

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

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import "bootstrap-icons/font/bootstrap-icons.css"

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

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

模板中使用

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

  <vuecmf-editor
      id="myeditor"
      size="default"
      :content="contentHtml"
      @on-change="getContent"
      :token="token"
      :params="params"
      upload="http://www.vuecmf.com/vuecmf/upload"
      openai="http://localhost:8080/web/ai"
      :upload_action="uploadAction"
      amap_key="高德地图申请的应用KEY"
  ></vuecmf-editor>
  <button @click="save">保存</button>


  <el-dialog
      v-model="dialogVisible"
      title="上传文件"
      width="50%"
  >
    <span>此处可以自定义上传组件或接入外部文件管理器组件，如<a href="https://github.com/vuecmf/vue-vuecmf-fileexplorer" target="_blank">vue-vuecmf-fileexplorer</a> </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFile">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>


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

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

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

      contentHtml.value = content
    }

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

    token.value = 'b9fa3e1f2fd0bcfc75aa7a5efd9d9d2b'
    params.value = '{"field_name":"pic"}'

    const dialogVisible = ref(false) //上传弹窗
    const fileObj = ref()
    const uploadAction = (fileInfo: any, from: string):void => {
      fileObj.value = fileInfo
      dialogVisible.value = true
      console.log(fileInfo, from)
    }

    //保存文件信息，如可将文件管理器中选择的文件信息保存
    const saveFile = ():void => {
      fileObj.value.url = 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/300'
      dialogVisible.value = false
    }

    return {
      getContent,
      contentHtml,
      save,
      token,
      params,

      dialogVisible,
      uploadAction,
      saveFile
    }

  }
});
</script>

属性

属性	必须	说明	类型	可选值	默认值
id	是	编辑器id	string	-	-
content	否	编辑器内容	string	-	空
height	否	编辑器高度	string	-	300px
size	否	编辑器中工具条大小样式	string	default, large, small	default
tools	否	自定义工具条，多个英文逗号分隔。例如 heading,table,code	string	heading 标题 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 撤销	空
upload_action	否	上传动作函数，主要用于自定义上传组件，如接入外部文件管理器。接收到两个参数：文件信息、字段信息	function	-	-
openai	否	AI大模型后端地址（如ChatGPT）,用于编辑器里的AI生成内容功能调用	string	-	-
amap_key	否	高德地图应用KEY,用于编辑器里的插入地图功能调用	string	-	-

事件

事件名	说明	参数
on-change	添加或修改编辑器中的内容时，触发此事件	content：编辑器内容， id：编辑器ID

# vue3-vuecmf-table

# 介绍

# 演示

# 安装

# 使用

# 导入组件

# 模板中使用

# 后端API示例

# 属性

# 插槽

# 事件

# vue-vuecmf-fileexplorer

# 介绍

# 演示

# 安装

# 使用

# 导入组件

# 模板中使用

# 属性

# 事件

# vue-vuecmf-dialog

# 介绍

# 演示

# 安装

# 使用

# 导入组件

# 模板中使用

# 属性

# 事件

# vue-vuecmf-editor

# 介绍

# 演示

# 安装

# 使用

# 导入组件

# 模板中使用

# 属性

# 事件

vue3-vuecmf-table

介绍

演示

安装

使用

导入组件

模板中使用

后端API示例

属性

插槽

事件

vue-vuecmf-fileexplorer

介绍

演示

安装

使用

导入组件

模板中使用

属性

事件

vue-vuecmf-dialog

介绍

演示

安装

使用

导入组件

模板中使用

属性

事件

vue-vuecmf-editor

介绍

演示

安装

使用

导入组件

模板中使用

属性

事件