# 表格组件

基于el-table实现。

# 组件名

TableView

# 配置项

# 样例

{
  "name": "TableView",
  "data_url": "/table/list?objectCode={objectCode}",
  "delete_url": "/table/delete?objectCode={objectCode}&{primaryKvExp}",
  "multi_select": true,
  "conf": {
    "default-sort": {
      "prop": "id",
      "order": "descending"
    },
    "highlight-current-row": true,
    "size": "medium"
  },
  "operation-bar": {
    "show": true,
    "group": true,
    "style": {},
    "conf": {
      "size": "mini"
    },
    "add": {
      "show": true,
      "text": "新增",
      "authorize": {
        "need_permit": false,
        "permit_by": "auth",
        "auths": [],
        "auth_match_mode": "any",
        "roles": [],
        "role_match_mode": "any"
      },
      "conf": {
        "size": "mini",
        "type": "primary",
        "icon": "el-icon-document-add"
      }
    },
    "delete": {
      "show": true,
      "text": "删除",
      "authorize": {
        "need_permit": false,
        "permit_by": "auth",
        "auths": [],
        "auth_match_mode": "any",
        "roles": [],
        "role_match_mode": "any"
      },
      "conf": {
        "size": "mini",
        "type": "danger",
        "icon": "el-icon-delete-solid"
      }
    }
  },
  "columns": [],
  "operation-column": {
    "show": true,
    "conf": {
      "fixed": "right",
      "width": "180"
    },
    "style": {},
    "buttons": {
      "show": true,
      "group": true,
      "style": {},
      "conf": {
        "size": "mini"
      },
      "view": {
        "show": true,
        "text": "",
        "authorize": {
          "need_permit": false,
          "permit_by": "auth",
          "auths": [],
          "auth_match_mode": "any",
          "roles": [],
          "role_match_mode": "any"
        },
        "conf": {
          "size": "mini",
          "type": "success",
          "icon": "el-icon-view"
        }
      },
      "edit": {
        "show": true,
        "text": "",
        "authorize": {
          "need_permit": false,
          "permit_by": "auth",
          "auths": [],
          "auth_match_mode": "any",
          "roles": [],
          "role_match_mode": "any"
        },
        "conf": {
          "size": "mini",
          "type": "primary",
          "icon": "el-icon-edit"
        }
      },
      "delete": {
        "show": true,
        "text": "",
        "authorize": {
          "need_permit": false,
          "permit_by": "auth",
          "auths": [],
          "auth_match_mode": "any",
          "roles": [],
          "role_match_mode": "any"
        },
        "conf": {
          "size": "mini",
          "type": "danger",
          "icon": "el-icon-delete"
        }
      }
    }
  },
  "pagination": {
    "show": true,
    "style": {
    },
    "conf": {
      "background": true,
      "page-size": 10,
      "page-sizes": [
        5,
        10,
        20,
        50,
        100,
        200
      ],
      "current-page": 1,
      "layout": "total, sizes, prev, pager, next, jumper"
    }
  }
}

# 详细说明

配置项	数据类型	是否必须	备注
name	String	是	必填, 会作为内部`el-table`的`ref name`, 建议就设置为元对象名
data_url	String	否	业务数据的获取接口, 此配置项值DbMeta内置好了, 如果更改可能导致错误结果
delete_url	String	否	数据删除的接口地址, 此配置项值DbMeta内置好了, 如果更改可能导致错误结果
multi_select	Boolean	否	是否支持多选, 为true则显示复选框支持勾选
conf	Object	否	参考ElementUI `el-table`的配置项 (opens new window)
operation-bar	Object	否	这是表格上方的操作条的配置。具体内容见operation-bar
columns	Array	否	这是列的配置, 也就是域配置的内容, 容器组件上无需配置，对域的配置会自动回填到此配置项中
operation-column	Object	否	这是表格中`操作`列的配置。具体内容见operation-column
pagination	Object	否	这是表格底部分页控件的配置。具体内容见pagination

# operation-bar

这是表格上方的操作条的配置。

配置项	数据类型	是否必须	备注
show	Boolean	否	默认true。是否显示操作条，为false则会隐藏顶部操作条
group	Boolean	否	默认true。若为false, 则顶部操作按钮将不呈现为一组，而是按钮之间彼此分离
style	Object	否	顶部操作条的样式，你可以写任何css样式，但记得调试
conf	Object	否	此项配置将作为顶部操作条中按钮默认的配置
add	Object	否	针对顶部操作条`添加`按钮的配置
delete	Object	否	针对顶部操作条`删除`按钮的配置

TIP

查看上面的配置样例，可以发现针对按钮，是可以配置其鉴权信息的。无权限时，页面将隐藏此按钮。鉴权配置和菜单鉴权、路由鉴权中的配置项和含义是一致的。

# operation-column

这是表格中操作列的配置

配置项	数据类型	是否必须	备注
show	Boolean	否	默认true。是否显示操作列，为false则会隐藏顶部操作条
conf	Object	否	此项配置将作为列的配置，你可以控制操作列的列宽等
style	Object	否	操作列的样式，你可以写任何css样式，但记得调试
buttons	Object	否	针对操作列中数据行的按钮群配置，配置项含义见名知意，不在赘述

# pagination

表格底部分页控件配置

配置项	数据类型	是否必须	备注
show	Boolean	否	默认true。是否显示分页，为false则会隐藏
style	Object	否	分页条的样式，你可以写任何css样式，但记得调试
conf	Object	否	分页控件的原生配置，请参考ElementUI的el-pagination配置项 (opens new window)

# props

# filterParams

表格数据的过滤入参，为http过滤而非前端过滤。此值用于SearchView参数传递。

# 插槽

# operation-bar

顶部操作条的插槽。传递参数:

conf: operation-bar配置项
choseData: 表格勾选的数据
activeData: 表格点选的数据

# prefix-btn

顶部操作条添加按钮前的插槽。传递参数:

conf: operation-bar配置项
choseData: 表格勾选的数据
activeData: 表格点选的数据

# add-btn

顶部操作条添加按钮的插槽。传递参数:

conf: operation-bar.add配置项
choseData: 表格勾选的数据
activeData: 表格点选的数据
add: 新增行为，可执行

# batch-delete-btn

顶部操作条删除按钮的插槽。传递参数:

conf: operation-bar.delete配置项
choseData: 表格勾选的数据
activeData: 表格点选的数据
batchDelete: 新增行为，可执行

# suffix-btn

顶部操作条删除按钮后的插槽。传递参数:

conf: operation-bar配置项
choseData: 表格勾选的数据
activeData: 表格点选的数据

# float-right-btn

顶部操作条浮动右侧的插槽。传递参数:

conf: operation-bar配置项
choseData: 表格勾选的数据
activeData: 表格点选的数据

# buttons

操作列中按钮组的插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons配置

# inner-before-extend-btn

操作列中按钮组前面的插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons配置

# view-btn

操作列中查看按钮插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons.view.conf配置
view: 按钮行为方法

# edit-btn

操作列中编辑按钮插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons.edit.conf配置
edit: 按钮行为方法

# delete-btn

操作列中删除按钮插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons.delete.conf配置
delete: 按钮行为方法

# inner-after-extend-btn

操作列中按钮组后面的插槽。传递参数:

scope: 当前记录数据, 见el-table文档
conf: buttons配置

# pagination

底部分页条插槽。传递参数:

pageModel: 分页数据模型对象。

# pagination-extend

底部分页条尾部扩展插槽。传递参数:

pageModel: 分页数据模型对象。
choseData: 表格勾选的数据
activeData: 表格点选的数据

# 域配置

# 样例

表格中的域配置样例如下:

{
  "name": "name",
  "sort": 1,
  "label": "姓名",
  "hidden": false,
  "render": "",
  "conf": {
    "align": "center",
    "width": "auto",
    "min-width": "60px",
    "header-align": "center",
    "show-overflow-tooltip": true
  }
}

# 详细说明

配置项	数据类型	是否必须	备注
name	String	是	在同一容器组件中，确保唯一！强烈推荐此值就使用默认的元字段名，即字段名
label	String	否	一般为中文，表格表头的列名
sort	Integer	否	排序，决定了列的顺序
hidden	Boolean	否	默认为false, 为true则隐藏当前列
render	String	否	这是一个字符串，但是内容为函数字符串。详见render
conf	Object	否	参考ElementUi中el-table-column的属性配置 (opens new window)

你可能注意到hidden的功能和元字段配置中列表显示功能一致，实际上当你为一个元对象配置多个TableView实例时，这个配置就有用了。元字段的逻辑配置会干预所有实例配置

# render

render是一个函数字符串，当你切换域配置面板为表单模式时，可以看到编辑框。如下:

其内容应该是一个匿名函数, 有两个入参h和value。完整的函数内容如下:

 function (h, value) {
    return h('span', value) // 未做任何渲染的改变
}

1.h: 如果你除了Vue的声明式渲染外，还用过函数渲染render，相信你对h这个入参并不陌生，他就是vue函数渲染render中的入参createElement。参考vue官方的渲染函数 (opens new window)

value: 这个就是我们表格单元中的原始值了。

借助`render`属性, 利用`h`和`value`。你可以改变表格单元的呈现方式。比如用`el-tag`、`el-image`来美化表格单元。

# 常用的render

TIP

下面的表格单元的render渲染函数 snippet可以直接按需拿来用。

# 图片渲染

值为字符串url时:

 function (h, value) {
    if (value && value.length > 0) {
        let url = value;
        return h('el-image', {
            attrs: {
                src: url,
                "preview-src-list": [url]
            },
            style: {
                width: '30px',
                height: '30px'
            }
        }, null)
    }
    return h('span', value)
}

值为json数组时:

function (h, value) {
    if (!value || value.length == 0) {
        return h('span', value)
    }
    let arrVal;
    try {
        arrVal = JSON.parse(value)
    } catch (err) {
        return h('span', value)
    }

    let images;
    let urls = [];
    for (let i = 0; i < arrVal.length; i++) {
        const {name, url} = arrVal[i]
        if (url) {
            urls.push(url)
        }
    }
    
    if (!urls || urls.length == 0) {
        return h('span', null)
    }
    return h('el-image', {
        attrs: {
            src: urls[0],
            "preview-src-list": urls
        },
        style: {
            width: '30px',
            height: '30px'
        }
    }, null)
}

# el-tag渲染

function (h, value) {
    // 多数情况你可能会依据value值的不同, 而采用不同的 type类型
    return h('el-tag', {
        attrs: { type: 'success' }
    }, value)
}

← 搜索组件树表组件 →