简介

可编辑表格，基于mb-table实现
分为两种模式：
1、预览模式，如果配置的有组件点击进入编辑模式
2、编辑模式

使用示例

<mb-editor-table ref="dataTableRef" v-bind="dataTableOptions" />

const dataTableOptions = reactive({
    props: {
        url: '/system/user/list',
        where: {
            username: 'admin'
        }
    },
    showNo: false,
    operation: {
        delete: {
            confirm: true
        },
        sub: true,
        same: true
    },
    operationWidth: 300,
    cols: [{
        field: 'username',
        label: '登录名称'
    },{
        field: 'roleId',
        label: '角色',
        component: 'select',
        componentProps: {
            url: "/system/role/all",
            placeholder: "请选择角色",
            multiple: true
        }
    },{
        field: 'officeIds',
        label: '组织机构',
        component: 'tree-select',
        componentProps: {
            url: "/system/user/offices",
            placeholder: "请选择组织机构",
            multiple: true
        }
    },{
        field: 'isLogin',
        label: '禁止登录',
        component: 'switch',
        componentProps: {
            checkedValue: 1,
            uncheckedValue: 0
        },
        showLabel: {
            data: [{value: 0, label: '禁用'},{value: 1, label: '启用'}]
        }
    }]
})

editor table methods

方法名称	参数	返回值	说明	版本
getData	()	Array	获取数据
setData	(data: Array)	void	设置数据
getTableRef	()	mb-table的ref	获取table ref
previewMode	(rowIndex, colIndex)	void	设置单元格为预览模式
push	(data: Object)	void	在表格后添加一条数据
unshift	(data: Object)	void	在表格前添加一条数据
disableComponentCallback	(fields: Array)	void	设置列组件禁止触发回调
enableComponentCallback	(fields: Array)	void	设置列组件启用触发回调
closeCurrentColEditMode	()	void	关闭当前单元格编辑模式

editor table props

名称	类型	默认值	说明	版本
id	String	undefined	表格唯一标识
props	Object	{}	mb-table的props
cols	Array	[]	详见cols
showNo	Boolean	true	是否显示序号
operation	Object	undefined	操作列配置operation
operationWidth	Number	85	操作列宽度
page	Boolean	false	是否分页
rowKey	String	'id'	表格数据的主键
preview	Boolean	false	预览模式
rowHoverEdit	Boolean	true	悬浮行，是否显示可编辑样式
keepCurrentPage	Boolean	true	reload时是否保留当前页码

editor table operation props

名称	类型	默认值	说明	版本
delete	Boolean | Object	undefined	删除功能
delete.confirm	Boolean	false	删除是否提示
delete.if	(row) => Boolean	undefined	判断是否显示
sub	Boolean | Object	false	添加下级功能
sub.if	(row) => Boolean	undefined	判断是否显示
same	Boolean | Object	false	添加同级功能
same.if	(row) => Boolean	undefined	判断是否显示
buttons	Array	undefined	详见buttons

editor table cols props

名称	类型	默认值	说明	版本
field	String	undefined	属性名
label	String	undefined	列显示名称
component	input | textarea | select | switch | tree-select | select-table | 等mb-xxx组件 | 等n-xxx（v-model:value的）组件	undefined	mb-xxx组件可以省略'mb-'前缀，如果要使用'n-xxx'组件需要写全
componentStyle	Object	undefined	组件的style
alwaysEdit	Boolean	false	是否一直处于编辑模式
edit	(row) => Boolean | Boolean	true	是否可以编辑，可以是一个方法根据当前行数据进行判断是否编辑
labelStyle	String	undefined	文本父级div的style，可以设置颜色等
show	(row) => Boolean	true	可以根据当前行数据判断文本是否显示
copyText	Boolean	false	是否可以复制单元格内容
更多			更多属性参考table-cols-props

插槽的使用

开启插槽配置type: 'dynamic'，插槽名称等于field属性的值加上模式后缀
1、预览模式：插槽名称后面加-view
2、编辑模式：插槽名称后面加-edit
如果让插槽内容一直展示，直接用预览模式的插槽后缀-view

<template>
    <mb-editor-table v-bind="editorTableOptions">
        <template #name-view="{ row, col, rowIndex, colIndex }">
            预览模式
            {{ row.name }}
        </template>
        <template #name-edit="{ row, col, rowIndex, colIndex }">
            编辑模式
            <n-input v-model:value="row[col.field]" />
        </template>
    </mb-editor-table>
</template>
<script>
import { reactive } from 'vue'
const editorTableOptions = reactive({
    cols: [{
        field: 'name',
        label: '名称',
        type: 'dynamic'
    }]
})
</script>

插槽属性说明：

名称	类型	说明
row	Object	行数据
col	Object	列属性
rowIndex	Number	行Index
colIndex	Number	列Index