# 万能表格

# 组件名：vk-data-table

# 核心思想：通过 JSON 配置渲染规则

# 基础用法

<vk-data-table :data="table1.data" :columns="table1.columns"></vk-data-table>

export default {
  data() {
    // 页面数据变量
    return {
      table1:{
        // 表格数据
        data:[],
        // 表格字段显示规则
        columns:[
          { key:"_id" , title:"用户ID" , type:"text" , width:200 },
          { key:"username" , title:"用户名" , type:"text" , width:200 },
          { key:"nickname" , title:"用户昵称" , type:"text" , width:200 },
          { key:"mobile" , title:"手机号" , type:"text" , width:200 },
          { key:"comment" , title:"备注" , type:"text" , minWidth:200 },
        ]
      }
    };
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 进阶用法

请直接看示例文件 /pages_template/components/table/table-easy

# API

# 属性

参数	说明	类型	默认值	可选值
action	动态模式 - vk框架下的云函数地址	String	无	-
auto-action	动态模式 - 是否组件加载完毕后自动运行action	Boolean	无	-
query-form-param	动态模式 - 请求参数（表格查询参数）	Object	{}	-
data-preprocess	动态模式 - 云函数返回的数据进行预处理查看数据预处理	function(list)	-	-
is-request	动态模式 - 是否是http请求模式查看http请求模式	Boolean	false	true
request-header	动态模式 - http请求头	Object	-	-
props	动态模式 - 渲染数据的配置选项查看http请求模式	Object	-	-
retry-count	动态模式 - 请求最大重试次数查看异常重试机制	Number	0	-
retry-interval	动态模式 - 每次重试间隔，单位毫秒	Number	0	-
data	静态模式 - 列表数据	Array	无	-
total	静态模式 - 总记录数	Number	无	-
columns	通用 - 字段显示规则查看columns	Array	[]	-
height	通用 - table的高度	Number	无	-
max-height	通用 - table的最大高度	Number	无	-
row-height	通用 - 行高	Number	无	-
row-key	通用 - 行数据的 Key （重要：值必须唯一，默认是_id）	Function,String	"_id"	-
top	通用 - margin-top的高度	Number	10	-
selection	通用 - 显示多选框	Boolean	false	true
selectable	通用 - 搭配selection=true时使用，返回值用来决定这一行的 CheckBox 是否可以勾选查看用法	Function(row,index)	-	-
rowNo	通用 - 显示序号	Boolean	false	true
pagination	通用 - 显示分页器	Boolean	false	true
page-size	通用 - 每页显示数量	Number	10	-
page-sizes	通用 - 每页显示数量选择列表	Array	[1, 5, 10, 20, 50, 100, 1000]	-
right-btns	通用 - 右侧显示的按钮列表查看right-btns	Array	[]	-
right-btns-type	通用 - 右侧显示的按钮类型	String	button	text
right-btns-align	通用 - 右侧显示的按钮对齐方式	String	center	left right
right-btns-more	通用 - 右侧更多按钮查看right-btns-more	Array	[]	-
custom-right-btns	通用 - 自定义右侧按钮查看custom-right-btns	Array	[]	-
empty-text	通用 - 空数据时显示的文本内容	String	"暂无数据"	-
default-expand-all	通用 - 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效	Boolean	false	true
tree-props	通用 - 渲染嵌套数据的配置选项	Object	{children: 'children', hasChildren: 'hasChildren'}	-
border	通用 - 是否带有纵向边框	Boolean	false	true
stripe	通用 - 是否为斑马纹	Boolean	false	true
size	通用 - Table 的尺寸	String	无	medium / small / mini
show-header	通用 - 是否显示表头	Boolean	true	false
highlight-current-row	通用 - 是否要高亮当前行查看高亮行处理	Boolean	true	false
detail-dialog-width	通用 - 详情弹窗的宽度	Number,String	"830px"	-
multiple	通用 - 可多选	Boolean	true	false
default-sort	默认排序规则查看default-sort	Object	-	-
show-summary	通用 - 是否需要显示合计行	Boolean	false	true
summary-method	通用 - 自定义合计的计算函数（详情见下方）查看summary-method	Function	-	-
total-option	通用 - 需要自动统计的行（详情见下方）	Array	-	-
expand	通用 - 是否开启点击可以展开行查看展开行	Boolean	false	true
left-fixed	通用 - 序号、多选框是否固定在左侧	Boolean	true	false
right-fixed	通用 - 操作按钮是否固定在右侧	Boolean	true	false

# columns（字段列表）

columns 是一个数组，数组内每个元素有以下属性

参数	说明	类型	默认值	可选值
key	键名	String	无	-
title	标题	String	无	-
type	类型	String	无	查看type
width	宽度	Number	无	-
minWidth	最小宽度（设置此值会自动填充宽度）	Number	无	-
align	对其方式	String	center	left 、right
headerAlign	表头对其方式	String	center	left 、right
sortable	是否是排序字段	String	custom	true 、false
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	string, boolean	无	true、left、right
show	显示规则，查看show	string 、 array	["detail","row","expand"]	"detail"、"row"、"expand"、 "none"
defaultValue	默认值	String	无	-
formatter	自定义格式化函数	function(val, row, column, index)	-	-
buttons	扩展按钮列表查看buttons	Array	-	-

# default-sort（默认排序）

参数	说明	类型	默认值	可选值
name	需要排序的字段名	String	-	-
type	排序类型	String	asc（升序）	desc（降序）

如默认按排序值从小到大排序

<vk-data-table
  :default-sort="{ name:'sort', type:'asc' }"
></vk-data-table>

1
2
3

注意

你填的 name的值 必须在 columns 的数组中存在对应的 key，即不可以对一个没有在 columns 内声明的字段进行排序。

推荐写法

<vk-data-table
  :default-sort="{ name:'_add_time', type:'asc' }"
></vk-data-table>

1
2
3

columns 中的 key 也要写 _add_time，同时加上属性 sortable:"custom"

columns:[
  { key:"_add_time", title:"添加时间", type:"time", width:160, sortable:"custom"  },
],

1
2
3

# right-btns（右侧固定按钮列表）

高效用法

效果图

<vk-data-table
  :right-btns="['detail_auto','update','delete','more']"
></vk-data-table>

1
2
3

自定义显示规则用法

效果图

<vk-data-table
  :right-btns="table1.rightBtns"
  right-btns-align="right"
></vk-data-table>

1
2
3
4

data() {
  return {
    table1:{
      
      rightBtns:[
        'detail_auto',
        {
          mode:'update',
          title:'编辑',
          disabled: (item)=>{
            return item._id == '002'
          }
        },
        {
          mode:'delete',
          title:'删除',
          show: (item)=>{
            return item._id != '002'
          }
        },
        'more'
      ],
      
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# right-btns数组内的可选值有

可选值	说明
detail	点击后触发detail事件
detail_auto	点击后自动弹出详情页
update	点击后触发update事件
delete	点击后触发delete事件
more	与 rightBtnsMore 搭配使用

# right-btns-more（更多按钮列表）

right-btns-more（右侧更多按钮点击后显示的按钮列表）

效果图

<vk-data-table
  right-btns="['detail_auto','update','delete','more']"
  :right-btns-more="table1.rightBtnsMore"
></vk-data-table>

1
2
3
4
5

data() {
  return {
    table1:{
      
      rightBtnsMore:[
        {
          title: '按钮1',
          disabled: (item)=>{
            return item._id == '002'
          },
          onClick: (item)=>{
            vk.toast(`${item._id}-按钮1`);
          }
        },
        {
          title: '按钮2',
          show: (item)=>{
            return item._id != '002'
          },
          onClick: (item)=>{
            vk.toast(`${item._id}-按钮2`);
          }
        },
        {
          title: '按钮3',
          disabled: '_id==002',
          onClick: (item)=>{
            vk.toast(`${item._id}-按钮3`);
          }
        },
        {
          title: '按钮4',
          disabled: '_id!=002',
          onClick: (item)=>{
            vk.toast(`${item._id}-按钮4`);
          }
        }
      ]
      
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# custom-right-btns（自定义右侧固定按钮）

效果图

<vk-data-table
  :custom-right-btns="table1.customRightBtns"
  right-btns-align="right"
></vk-data-table>

1
2
3
4

data() {
  return {
    table1: {
      
      customRightBtns: [
        {
          title: '按钮1', type: 'primary', icon: 'el-icon-edit',
          disabled:(item)=>{
            return item._id == '002'
          },
          onClick:(item)=>{
            vk.toast(`${item._id}-按钮1`);
          }
        },
        {
          title: '按钮2', type: 'success', icon: 'el-icon-edit',
          show:(item)=>{
            return item._id != '002'
          },
          onClick:(item)=>{
            vk.toast(`${item._id}-按钮2`);
          }
        },
        {
          title: '按钮3', type: 'warning', icon: 'el-icon-edit',
          disabled: '_id==002',
          onClick:(item)=>{
            vk.toast(`${item._id}-按钮3`);
          }
        },
        {
          title: '按钮4', type: 'danger', icon: 'el-icon-edit',
          disabled: '_id!=002',
          onClick:(item)=>{
            vk.toast(`${item._id}-按钮4`);
          }
        }
      ],
      
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# 高亮行处理

通过设置

:highlight-current-row = "false"

可以关闭 点击 某行时的高亮，若想要关闭 hover 某行时的高亮，可以通过以下css样式覆盖达到效果。(将下方css写在需要生效的页面的style标签内)

::v-deep .plTableBox .el-table__body tr.hover-row.current-row>td,
::v-deep .plTableBox .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
::v-deep .plTableBox .el-table__body tr.hover-row.el-table__row--striped>td,
::v-deep .plTableBox .el-table__body tr.hover-row>td {
  background-color: #FFFFFF !important;
}

1
2
3
4
5
6

# http请求模式

# props 对象属性

参数	说明	类型	默认值	可选值
rows	表格数据源的键名	String	rows	-
total	总记录条数的键名	String	total	-
pageIndex	查询时当前第几页的键名	String	pageIndex	-
pageSize	查询时每页显示几条的键名	String	pageSize	-
formData	查询表单的数据源的键名	String	formData	-

# 示例代码

<vk-data-table
  ref="table1"
  action="https://www.xxx.com/xxx/xxx"
  :is-request="true"
  :props="{ rows: 'rows', total: 'total', pageIndex: 'pageIndex', pageSize: 'pageSize', formData: 'formData' }"
  :columns="table1.columns"
  :query-form-param="queryForm1"
></vk-data-table>

1
2
3
4
5
6
7
8

# 数据预处理

<vk-data-table
  :data-preprocess="table1.dataPreprocess"
></vk-data-table>

1
2
3

export default {
  data() {
    return {
      table1:{
        
        dataPreprocess : (list) => {
          // 这里写自己的处理逻辑，最终返回处理完的list即可。
          list.map((item, index) => {
            item.a = 1;
          });
          return list;
        }
        
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

<vk-data-table
  ref="table1"
  :action="table1.action"
  :columns="table1.columns"
  :query-form-param="queryForm1"
  :expand="true"
></vk-data-table>

1
2
3
4
5
6
7

可以配合show选择展开后显示的哪些字段查看show

同时还可以通过插槽编写展开后的样式查看插槽

# 表格自带的多选框禁用规则

<vk-data-table
  :selection="true"
  :selectable="table1.selectable"
></vk-data-table>

1
2
3
4

export default {
  data() {
    return {
      table1:{
        
        selectable:(row,index)=>{
          // 返回true,代表可以多选,返回false代表该行的多选框禁用。
          if (index == 1) {
            return false;
          } else {
            return true;
          }
        }
        
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 异常重试机制

retry-count 属性异常重试机制可以有效解决当前阿里云空间偶尔会出现数据库连接超时导致的异常没有获取到数据的问题。

同时可以通过设置 retry-interval 属性，可以控制每次重试的间隔（单位为毫秒）

<vk-data-table
  ref="table1"
  :action="table1.action"
  :columns="table1.columns"
  :query-form-param="queryForm1"
  :retry-count="3"
></vk-data-table>

1
2
3
4
5
6
7

注意：并非所有异常都会重试，框架会合理判断。（目前此判断逻辑也还在不断优化中）

# columns（属性详细说明）

# show（字段显示规则）

show是一个字符串数组，columns 数组内每一个元素都可以单独设置 show

如果 columns 的某元素中不存在 show 参数，则代表全部显示（行内、详情弹窗、行展开时）
如果数组中有包含 "detail" ，则代表会在详情弹窗时显示
如果数组中有包含 "row" ，则代表会在表格行内显示
如果数组中有包含 "expand" ，则代表会在表格行展开时显示
如果数组只有 ["none"] ，则代表都不显示

返回展开行

# type（字段类型）

table1:{
  columns:[
    { key: "nickname", title: "昵称", type: "text", width: 120, defaultValue:"未设置昵称", },
    { key: "avatar", title: "头像", type: "avatar", width: 80, imageWidth:40, shape:"circle" }, // circle 圆形 square 方形
    { key: "images", title: "图片", type: "image", width: 120, imageWidth:60 },
    { key: "rate", title: "评分", type: "rate", width: 120 },
    { key: "switch", title: "开关", type: "switch", width: 120, activeValue:true, inactiveValue:false },
    { key: "icon1", title: "图标", type: "icon", width: 120 },
    { 
      key: "icon2", title: "图标", type: "icon", width: 120,
      // 当 icon2 值为1时，显示vk-icon-activityfill图标，2时，显示vk-icon-crownfill图标
      data:[
        { value:1, icon:"vk-icon-activityfill"},
        { value:2, icon:"vk-icon-crownfill"}
      ]
    },
    { 
      key: "type", title: "类型", type: "tag", width: 120, size: "small",
      data:[
        { value:1, label:"收入", tagType:"success" },
        { value:2, label:"支出", tagType:"danger" }
      ]
    },
    { key: "_add_time", title: "添加时间", type: "time", width: 160, valueFormat:"yyyy-MM-dd hh:mm:ss" },
    { key: "_add_time", title: "距离现在", type: "dateDiff", width: 120 },
    { key:"exp_time", title:"到期剩", type:"dateDiff2", endText:"已到期", width:80, defaultValue: "永久", sortable:"custom" },
    { 
      key: "nickname", title: "html渲染", type: "html",
      formatter: (val, row, column, index) => {
        let str = `<text>${val}</text>（审核通过）`;
        return str;
      }
    },
    { key: "balance", title: "余额", type: "money", width: 120 },
    { key: "percentage", title: "占比", type: "percentage", width: 120 },
    { key: "address", title: "地址", type: "address", width: 120 },
    { key: "userInfo", title: "用户", type: "userInfo", width: 120 },
    // group 是将多个字段显示在一个单元格内
    { 
      key: "", title: "分组显示", type: "group", minWidth: 290, align:"left",
      columns:[
        { key: "_id", title: "ID", type: "text" },
        { key: "avatar", title: "头像", type: "avatar" },
        { key: "nickname", title: "昵称", type: "text" },
      ],
    },
    // object 是解析对象类型的字段
    { 
      key: "object1", title: "对象字段", type: "object", width: 180, align:"left",
      columns:[
        { key: "key1", title: "对象内字段1", type: "text" },
        { key: "key2", title: "对象内字段2", type: "text" },
      ],
    },
    // table 是解析对象数组类型的字段，建议只在详情页内展示.
    { 
      key: "arr1", title: "对象数组字段", type: "table", width: 200, show: ["detail"],
      rowHeight:50, // 行高
      columns: [
        { key: "key1",title: "对象的字段1",type: "text",width: 120 },
        { key: "key2",title: "对象内字段2",type: "text",width: 120 }
      ]
    },
    { 
      key: "gender", title: "性别", type: "radio", width: 120, defaultValue:0,
      data:[
        { value:1, label:"男" },
        { value:2, label:"女" },
        { value:0, label:"保密" },
      ]
    },
    { 
      key: "gender", title: "性别", type: "select", width: 120, defaultValue:0,
      data:[
        { value:1, label:"男" },
        { value:2, label:"女" },
        { value:0, label:"保密" },
      ]
    },
    { 
      key: "checkbox", title: "多选字段", type: "checkbox", width: 120, defaultValue:1,
      data:[
        { value: 1, label: "选项一" },
        { value: 2, label: "选项二" },
      ]
    },
    { key: "json", title: "json字段", type: "json", width: 120, maxHeight:300 }
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

# buttons（字段扩展按钮列表）

每个字段的扩展按钮列表（支持每行记录显示不同的按钮）

效果图：（此效果图为场景1的样式）

主要使用场景：

1、点击修改该字段（如修改商品名称，点击后自动在字段右侧显示修改商品名称的弹窗，输入新商品名称，点击确定，自动修改）;
2、点击后查看字段扩展信息（如：审核未通过旁边加个 原因 按钮，点击后查看未通过的审核的原因）;
3、余额字段，点击后给用户加余额;
4、点击后给待发货的订单发货;
5、等等;

原先我们实现此功能需要使用插槽来写，而现在只需要写一个 buttons 属性即可

特别注意：使用 buttons 的 key 的值不支持 a.b 这样的路径（即不支持带.）

如果扩展按钮列表无法满足你的需求，则可以用插槽来完全自定义该字段的实现。 查看插槽

单个修改按钮示例

{
  key: "key1", title: "标题", type: "text", width: 200,
  buttonsPosition:"right", // 支持 left right bottom top
  buttons: [
    {
      title: "修改",
      type: "text", // 文字形式按钮 可选：primary / success / warning / danger / info / text
      mode: "update", // 模式 可选：update（通用修改模式） / default（自定义模式）
      show: ["row"], // 在哪些场景显示按钮 多选：row（在行内显示） / detail（在详情页显示）
      showRule: (formData) => {
        // 此为演示只有字段 key2 不等于 1时，才会显示此按钮。
        return (formData.key2 != 1) ? true : false;
      },
      click: (options) => {
        console.log(1, options.value, options.formData);
        vk.callFunction({
          url: 'template/test/pub/test',
          data: options.formData,
          success: (data) => {
            // 通知组件操作成功（否则组件按钮会一直处于loading状态）
            options.success({
              msg: "修改成功"
            });
          }
        });
      }
    }
  ]
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

多个修改按钮示例

{
  key: "key1", title: "标题", type: "text", width: 200,
  buttonsPosition:"right", // 支持 left right bottom top
  buttons: [
    {
      title: "修改",
      type: "text", // 文字形式按钮 可选：primary / success / warning / danger / info / text
      mode: "update", // 模式 可选：update（通用修改模式） / default（自定义模式）
      show: ["row"], // 在哪些场景显示按钮 多选：row（在行内显示） / detail（在详情页显示）
      showRule: (formData) => {
        // 此为演示只有字段 key2 不等于 1时，才会显示此按钮。
        return (formData.key2 != 1) ? true : false;
      },
      click: (options) => {
        console.log(1, options.value, options.formData);
        vk.callFunction({
          url: 'template/test/pub/test',
          data: options.formData,
          success: (data) => {
            // 通知组件操作成功（否则组件按钮会一直处于loading状态）
            options.success({
              msg: "修改成功"
            });
          }
        });
      }
    },
    {
      title: "查看",
      type: "text",
      show: ["detail", "row"],
      click: (options) => {
        console.log(2, options.value, options.formData);
        uni.vk.toast("你点击了查看");
      }
    }
  ]
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

# filter（本地数据过滤器）

{ key:"remark", title:"备注", type:"text", width:200,
  // 本地数据过滤器
  filter:{
    data:[
      { text: '备注1', value: '备注1' },
      { text: '备注2', value:'备注2' },
    ],
    multiple:true, // 是否可多选
    method:(value, row, column)=>{
      return value === row.remark;
    },
    defaultValue:[], // 过滤器默认值 如：["备注1"]
  }
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# formatter（自定义格式化渲染）

一般用于 type 为 html 或 text 时使用，最终显示的结果时 formatter 函数 return 的值

{ 
  key: "nickname", title: "text", type: "text",
  formatter: (val, row, column, index) => {
    let str = `${val}（审核通过）`;
    return str;
  }
},

1
2
3
4
5
6
7

{ 
  key: "nickname", title: "html", type: "html",
  formatter: (val, row, column, index) => {
    let str = `<text>${val}</text>（审核通过）`;
    return str;
  }
},

1
2
3
4
5
6
7

# 事件

事件名	说明	回调参数
table-mounted	表格组件挂载完毕时（此时还没有数据）	-
success	表格数据查询成功时	{ data(请求返回的原始数据), list, total }
fail	表格数据查询失败时	err
complete	表格数据查询无论成功和失败都会触发	res
detail	点击详情按钮（手动版）时 item和row值一样，区别在于修改row的值会影响表格实际显示	{ item, row, open }
update	点击修改按钮时 item和row值一样，区别在于修改row的值会影响表格实际显示	{ item, row }
delete	点击删除按钮时	{ item, deleteFn }
custom-right-btns	自定义右侧按钮点击事件	column, event
right-btns-more	自定义右侧更多按钮点击事件	res, item
current-change	点击(高亮)某一行	row
row-click	单击某一行	row, column, event
row-dblclick	双击某一行	row, column, event
row-contextmenu	鼠标右键某一行	row, column, event
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, eventt
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, eventt
cell-click	单击某一个单元格	row, column, cell, event
cell-dblclick	双击某一个单元格	row, column, cell, event
header-click	某一列的表头被点击时	column, event
header-contextmenu	某一列的表头被鼠标右键点击时	row, btn
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
pagination-change	点击分页按钮事件（手动模式下使用）	paginationData
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选的 Checkbox 时触发的事件	selection
selection-change	多选框状态发生变化时	rows
其他	其他element自带的事件大部分也支持	-

# 方法

# 通过 this.$refs.table1.xxx(); 方式调用

方法名	说明
refresh	刷新
search	查询（搜索）
getCurrentRow	获取当前选中的行的数据
getTableData	获取整个表格数据
getTableFormatterData	获取整个表格数据（格式化后的数据）
getMultipleSelection	获取多选框的数据
showDetail	显示详情页
closeDetail	关闭详情页
exportExcel	导出xls表格文件
deleteRows	删除指定的行（不删数据库数据）
updateRows	更新指定的行数据（不更新据库数据）
setTableData	手动给表格重新赋值数据
toggleRowSelection	批量修改表格内的多选框选中状态

# showDetail（显示详情页）

that.$refs.table1.showDetail(item); // item是该条记录的数据源

# 删除指定的行（不删数据库数据）

that.$refs.table1.deleteRows({
  ids:["60acf6248a69dc00018d8520"],
  success:()=>{
    
  }
});

1
2
3
4
5
6

# 更新指定的行数据（不更新据库数据）

that.$refs.table1.updateRows({
  mode:"update", // update 局部字段更新 set 覆盖字段更新
  rows:[
    { _id:"60acf6248a69dc00018d8520", remark:"被修改了", money:10000 }
  ],
  success:()=>{
    
  }
});

1
2
3
4
5
6
7
8
9

# 导出表格显示的数据

that.$refs.table1.exportExcel();

# 导出表格显示的数据（不显示序号）

that.$refs.table1.exportExcel({
  showNo: false
});

1
2
3

# 自定义导出表格数据

that.$refs.table1.exportExcel({
  fileName : "表格数据",
  original : false,
  columns: [
    { key:"_id", title:"id", type:"text" },
    { key:"money", title:"金额", type:"money" },
  ]
});

1
2
3
4
5
6
7
8

# 导出满足表格查询条件的数据库内所有数据

that.$refs.table1.exportExcel({
  fileName: "表格全部数据",
  title: "正在导出数据...",
  pageIndex: 1,
  pageSize: -1, // 此值为-1，代表导出所有数据
});

1
2
3
4
5
6

# 导出自定义数据

that.$refs.table1.exportExcel({
  fileName:"文件名称",
  data:[
    { a:1,b:2},
    { a:11,b:22}
  ],
  columns:[
    { key:"a", title:"标题a", type:"text" },
    { key:"b", title:"标题b", type:"text" },
  ]
});

1
2
3
4
5
6
7
8
9
10
11

# 获取当前选中的行的数据（原始数据）

let info = that.$refs.table1.getCurrentRow();
console.log(info);

1
2

# 获取整个表格数据（原始数据）

let info = that.$refs.table1.getTableData();
console.log(info);

1
2

# 获取整个表格数据（格式化后的数据）

let info = that.$refs.table1.getTableFormatterData();
console.log(info);

1
2

# 获取整个表格数据（格式化后的数据,key为中文）

let info = that.$refs.table1.getTableFormatterData({
  key:"title"
});
console.log(info);

1
2
3
4

# 批量修改表格内的多选框选中状态

let arr = [];
let uTreeData = that.$refs.table1.getUTreeData(); // 这一步很重要，row只接收 uTreeData 内的元素
arr.push({
  row: uTreeData[0],
  selected: true
});
arr.push({
  row: uTreeData[1],
  selected: false
});
that.$refs.table1.toggleRowSelection(arr);

1
2
3
4
5
6
7
8
9
10
11

# 插槽

# columns中的每一个key都是插槽的名称

# 如重写`gender`字段的渲染

注意: 只需要把下方<template></template>标签和标签内的代码复制到你页面上的<vk-data-table></vk-data-table>标签内即可

<vk-data-table>

  <!-- v-slot:gender 中的 gender 对应 columns中的 key, row对应 这一行的数据源 -->
  <template  v-slot:gender="{ row, column, index }">
    <view>我是插槽：{{ row.gender }}</view>
  </template>
  
</vk-data-table>

1
2
3
4
5
6
7
8

# 展开行插槽

<vk-data-table>

  <!-- v-slot:tableExpand 是固定的 row 是该行的数据源-->
  <template  v-slot:tableExpand="{ row }">
    <view>我是插槽：{{ row._id }}</view>
  </template>
  
</vk-data-table>

1
2
3
4
5
6
7
8

返回展开行

# 万能表格搜索组件

<!-- 表格搜索组件开始 -->
<vk-data-table-query
  v-model="queryForm1.formData"
  :columns="queryForm1.columns"
  @search="search"
></vk-data-table-query>
<!-- 表格搜索组件结束 -->

<!-- 表格组件开始 -->
<vk-data-table
 ...其他参数
  :query-form-param="queryForm1"
 ...其他参数
></vk-data-table>
<!-- 表格组件结束 -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 折叠抽屉弹窗模式

<vk-data-table-query
  ref="tableQuery1"
  v-model="queryForm1.formData"
  :columns="queryForm1.columns"
  :main-columns="['user_id','_add_time']"
  @search="search"
></vk-data-table-query>

1
2
3
4
5
6
7

queryForm1:{
  // 查询表单数据源，可在此设置默认值
  formData:{

  },
  // 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
  columns:[
    { key:"nickname", title:"昵称", type:"text", width:160, mode:"%%" },
    { key:"_add_time", title:"添加时间", type:"datetimerange", width:400, mode:"[]" },
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12

# 组件属性

参数	说明	类型	默认值	可选值
v-model	绑定查询表单数据源	Object	-	-
columns	字段渲染规则	Array	-	查看columns
show-reset	是否显示重置按钮	Boolean	false	true
main-columns	在页面上直接显示的字段名数组，此值若不为空，则会显示高级搜索按钮	Array	-	-
drawer	高级搜索的抽屉弹窗的属性（详情见element的drawer文档）	Object	-
search-text	搜索按钮的文本	String	搜索	-
senior-search-text	高级搜索按钮的文本	String	高级搜索	-

# columns

queryForm1.columns 参数说明 columns属性的写法与万能表单相似(但部分表单组件搜索不支持)

万能表单文档 (opens new window)

参数	说明	类型	默认值	可选值
key	键名	String	无	-
title	标题	String	无	-
type	组件类型	String	无	-
width	组件宽度	Number	无	-
placeholder	输入前的提示	String	-	-
mode	查询模式	String	=	查看mode
fieldName	数据库字段名称，默认=key的值	String	key的值	-
lastWhereJson	是否是连表后的where条件	Boolean	false	true
hidden	是否隐藏该字段（规则依然生效，但不在页面中渲染此组件）	Boolean	false	true
show	显示规则,page代表显示在页面上，drawer代表显示在高级搜索中	Array	["page"]	["page","drawer"]

# fieldName 参数的用处

# 如余额按金额范围查询

columns:[
  { 
    key:"balance1", title:"金额范围", type:"money", width:160, placeholder:"请输入最小金额", 
    mode:">=", fieldName:"balance", 
  },
  { 
    key:"balance2", title:"-", type:"money", width:160, placeholder:"请输入最大金额", 
    mode:"<=", fieldName:"balance", 
  }
]

1
2
3
4
5
6
7
8
9
10

# lastWhereJson 参数的用处

# 如userInfo是连表字段的as的值，想要根据 userInfo.mobile 进行查询

columns:[
  { 
    key:"mobile", title:"手机号", type:"text", width:160,
    mode:"=", fieldName:"userInfo.mobile", lastWhereJson:true
  }
]

1
2
3
4
5
6

# mode

# queryForm1.columns 中 mode 参数详情

值	说明
=	完全匹配
!=	不等于
%%	模糊匹配
%*	以xxx开头
*%	以xxx结尾
>	大于
>=	大于等于
<	小于
<=	小于等于
in	在数组里
nin	不在数组里
[]	范围 arr[0] <= x <= arr[1]
[)	范围 arr[0] <= x < arr[1]
(]	范围 arr[0] < x <= arr[1]
()	范围 arr[0] < x < arr[1]

# 特殊说明

当 value 为以下值时，会有特殊效果。

value值	说明
`___empty-array___`	匹配空数组
`___empty-object___`	匹配空对象
`___non-existent___`	字段不存在
`___existent___`	字段存在

tips: 左右各 3 个下划线_

# vk.baseDao.getTableData

用法与 vk.baseDao.selects 相似，区别是 vk.baseDao.getTableData 多了一个 data 参数

vk.baseDao.selects万能连表文档 (opens new window)

# data 参数介绍

data 参数的作用是让前端可以直接传查询条件和排序条件。同时为了控制安全性，getTableData 的 whereJson 参数可以设置强制where条件

Ta的优势是：

1、条件查询很方便，且减少了很多代码量。
2、在云函数端写强制条件，不用担心用户看到不该看的数据。
3、代码结构比较清晰，容易阅读与理解。

参数	说明	类型	默认值	可选值
pageIndex	第几页	Number	1	-
pageSize	每页查询数量	Number	-	-
formData	查询条件数据源	Object	-	-
columns	查询条件字段规则	Array	-	-
sortRule	排序规则	Array	-	-

# 云函数代码示例

// 通常data是前端传过来的数据
let data = {
  pageIndex: 1,
  pageSize: 20,
  formData: {
    nickname: "张飞"
  },
  columns: [
    { key: "nickname", title: "昵称", type: "text", width: 160, mode: "%%" },
    { key: "_add_time", title: "添加时间", type: "datetimerange", width: 400, mode: "[]" },
  ],
  sortRule: [
    { name: "_add_time", type: "desc" }
  ]
};
// 上面的formData.nickname = "张飞"，且columns中的nickname的 mode为 "%%"，代表模糊搜索nickname字段包含张飞的数据

let dbName = "表名";
vk.baseDao.getTableData({
  dbName,
  data,
  // 强制where条件，比如这里设置了只能查询当前登录用户的数据
  whereJson: {
    user_id:uid
  }, 
  // 强制字段显示规则
  fieldJson: {
    
  }, 
  // 默认排序规则
  sortArr: [
    
  ], 
  // 副表列表
  foreignDB:[
    
  ], 
  // 聚合结束后的where条件
  lastWhereJson: {
    
  } 
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 设置全局默认排序规则

在 common/uni-config-center/vk-unicloud/index.js 中

配置 vk.db.unicloud.getTableData.sortArr，可以设置 vk.baseDao.getTableData 全局默认排序规则

"vk":{
  "db":{
    "unicloud":{
      "getTableData":{
        "sortArr":[{"name":"_add_time","type":"desc"}], // vk.baseDao.getTableData 默认排序规则
      }
    }
  }
}

1
2
3
4
5
6
7
8
9

# 万能表格合计列的示例

# 简单模式

<vk-data-table
  ...其他属性
  :show-summary="true"
  :total-option=" [
     { key: '（此为table1.columns中key的值）', 'unit': '单位', type:'number', precision:2 },
     { key: 'balance', 'unit': '元', type:'money', precision:2 }
  ]"
></vk-data-table>

1
2
3
4
5
6
7
8

# summary-method

# 自定义模式

# 自定义函数方法，如果想要自定义合计规则和样式，则需要使用summary-method属性进行自定义，代码如下

<vk-data-table
  ...其他属性
  :show-summary="true"
  :summary-method="summaryMethod"
></vk-data-table>

1
2
3
4
5

summaryMethod({ columns, data }) {
  const means = ['']; // 合计
  // 需要进行合计的字段
  let totalOption = [
    { key: 'money', 'unit': '元', type:"money" },
  ];
  for(let columnIndex=0; columnIndex<columns.length; columnIndex++){
    let column = columns[columnIndex];
    if (columnIndex === 0) {
      means.push('合计');
    } else {
      let columnItem = vk.pubfn.getListItem(totalOption, "key", column.property);
      if(!columnItem){
        continue;
      }
      let {
        precision = 2
      } = columnItem;
      const values = data.map(dataItem => Number(dataItem[column.property]));
      // 合计
      if (!values.every(value => isNaN(value))) {
        means[columnIndex] = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0);
        means[columnIndex] = vk.pubfn.toDecimal(means[columnIndex], precision);
        if(columnItem.type === "money"){
          // 金额字段的特殊处理
          let money = vk.pubfn.priceFilter(means[columnIndex]);
          means[columnIndex] = `<span style="color: red">${money}${columnItem.unit}</span>`;
        }else{
          means[columnIndex] = `<span style="color: red">${means[columnIndex]}${columnItem.unit}</span>`;
        }
      } else {
        // 如果不是数字类型,则直接为空
        means[columnIndex] = "";
      }
    }
  }
  return [means];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

← 主题万能表单 →

# 万能表格

# 组件名：vk-data-table

# 核心思想：通过 JSON 配置渲染规则

# 基础用法

# 进阶用法

# API

# 属性

# columns（字段列表）

# default-sort（默认排序）

# right-btns（右侧固定按钮列表）

# right-btns数组内的可选值有

# right-btns-more（更多按钮列表）

# custom-right-btns（自定义右侧固定按钮）

# 高亮行处理

# http请求模式

# props 对象属性

# 示例代码

# 数据预处理

# 展开行

# 表格自带的多选框禁用规则

# 异常重试机制

# columns（属性详细说明）

# show（字段显示规则）

# type（字段类型）

# buttons（字段扩展按钮列表）

# filter（本地数据过滤器）

# formatter（自定义格式化渲染）

# 事件

# 方法

# 通过 this.$refs.table1.xxx(); 方式调用

# showDetail（显示详情页）

# 删除指定的行（不删数据库数据）

# 更新指定的行数据（不更新据库数据）

# 导出表格显示的数据

# 导出表格显示的数据（不显示序号）

# 自定义导出表格数据

# 导出满足表格查询条件的数据库内所有数据

# 导出自定义数据

# 获取当前选中的行的数据（原始数据）

# 获取整个表格数据（原始数据）

# 获取整个表格数据（格式化后的数据）

# 获取整个表格数据（格式化后的数据,key为中文）

# 批量修改表格内的多选框选中状态

# 插槽

# columns中的每一个key都是插槽的名称

# 如重写gender字段的渲染

# 展开行插槽

# 万能表格搜索组件

# 折叠抽屉弹窗模式

# 组件属性

# columns

# fieldName 参数的用处

# 如余额按金额范围查询

# lastWhereJson 参数的用处

# 如userInfo是连表字段的as的值，想要根据 userInfo.mobile 进行查询

# mode

# queryForm1.columns 中 mode 参数详情

# 特殊说明

# vk.baseDao.getTableData

# data 参数介绍

# 云函数代码示例

# 设置全局默认排序规则

# 万能表格合计列的示例

# 简单模式

# summary-method

# 自定义模式

# 自定义函数方法，如果想要自定义合计规则和样式，则需要使用summary-method属性进行自定义，代码如下

# 如重写`gender`字段的渲染