更新记录

1.3.5（2022-06-09） 下载此版本

  1. del: 移除 tableOpt.border 属性，
  2. add: 新增 tableOpt.borderLeft 属性 控制是否显示竖向边框
  3. add: 新增 tableOpt.borderBottom 属性，控制是否显示横向边框
  4. update: 调整了树形结构下展开/收起图标的颜色（之前有点不显眼）
  5. fix: 部分小细节调整

1.3.4（2022-06-08） 下载此版本

修复一些小bug

1.3.3（2022-06-07） 下载此版本

  1. update: iconfont.scss
    • 字体文件引用改成 https形式
    • 新增两个图表：上箭头、下箭头；用于排序图标
  2. update：排序图标现在跟表头文字颜色保持一致：非选中状态 透明度50，选中状态不透明
  3. add：tableOpt新增配置：tableOpt.border 、tableOpt.borderColor 用于控制表格内容的边框是否显示及边框颜色
  4. add：headerOpt新增配置：headerOpt.border 、 headerOpt.borderColor 用户控制表头的边框是否显示及边框颜色
  5. add: columns 新增配置： columns[item].autoColor 、columns[item].minusColor、columns[item].positiveColor
    • columns[item].autoColor 开启后自动根据数值显示对应颜色，非数字类型或者0 取columns[item].borderColor 颜色，小于0 取 minusColor | 绿色。大于0取 positiveColor | 红色。 以上新增可查看例子【模式示例】
查看更多

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × √ × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

微信小程序预览
gh_1b45e9ae22b2_258

使用说明

相关功能说明及配置说明

字段映射 [v1.2.0]

columns[item].valueEnum : 值映射对象 详细请下载demo查看 示例：（示例2-第四个 字段映射 ）

分组表格 [v1.2.0]

props[isGroup] = true 开启 新增分组表格功能，示例已更新（示例2-第三个 分组-没有[总计行]功能(不可用) ）

全部配置: (props)

export default {
    props:{
        // 表格名称相关配置 ,详细请看本文具体配置
        nameOpt: {type: Object},
        // 表头相关配置 ,详细请看本文具体配置
        headerOpt: { type: Object },
        // 表格基础配置 ,详细请看本文具体配置
        tableOpt: { type: Object },
        // 数据源唯一key字段名
        idKey: { type: String, default: 'id' },
        // columns中对应列表数据的 字段名(例子中对应dataIndex)
        colKey: { type: String, default: 'key' },
        // 数据源 异步加载可以先传递false
        tableData: { type: [Array, Boolean], default () { return false } },
        // 表头数据
        columns: {type: [Array, Boolean], required: true},
        // 初始化是否显示loading
        showLoading: {type: Boolean,default: true},
        // 表格高度 不传递或0表示不限制
        tableHeight: {type: [Number, Boolean],default: 0},
        // 组件内自动排序，默认true
        autoSort： { type: Boolean, default: true},
        // 分页功能相关配置， 详细情况本文具体配置
        pagerOpt: { type: Object },
        // [v1.0.4新增] 当前页 传 false 表示内部处理分页，传Number类型表示外部处理分页，会暴露 上一页、下一页事件
        currentPage: { type: Boolean | Number, default: false},
        // [v1.0.4新增] 总页数
        totalPage: { type: Number, default: 1},
        // [v1.1.1新增] 控制是否默认展开全部（树形） 默认false
        defaultOpen: { type: Boolean, default: false },
        // [v1.2.0新增] 分组表格 默认false 开启分组表格 总计行功能不可用
        isGroup: { type: Boolean, default: false},
    }
}

表格名称

  1. 可单独配置是否显示表格名称列
  2. 右侧菜单可单独控制是否展示
  3. 文字样式、对齐方式、背景颜色可配置

相关配置：（props：nameOpt）
以下全部配置项（默认配置在config.js -> defaultNameOpt） 

    nameOpt:{
        // isShow Boolean | 是否显示表格标题
        isShow: true,
        // title String | 标题文字
        title: '',
        // needMenu Boolean | 是否需要右侧菜单按钮
        needMenu: false,
        // bg String | 表格标题背景颜色
        bg: '#2979ff',
        // color String | 表格标题文字颜色
        color: '#ffffff',
        // bold Boolean | 是否加粗
        bold: true,
        // align String | 对齐方式 left/center/right
        align: 'left',
        // fontSize Number | 文字大小
        // 数字类型，单位 px [v1.1.1]调整
        fontSize: 14
    }

表头

  1. 支持多级表头（收起全部、展开全部）
  2. 支持配置表头高度、文字样式、对齐方式、背景颜色（统一配置）
  3. 支持单独配置每一列宽度、是否筛选、字符串模板

相关配置：（props：headerOpt）

以下表头部分统一配置（默认配置在config.js -> defaultHeaderOpt） 

// 表头配置
export const defaultHeaderOpt = {
    // bg String | 表头背景颜色
    bg: '#f3f4f6',
    // color String | 表头字体颜色
    color: '#333333',
    // bold Boolean | 表头文字是否加粗
    bold: true,
    // align String | 表头文字对齐方式 left/center/right
    align: 'center',
    // fontSize Number | 表头文字字体大小
    // 数字类型，单位 px [v1.1.1]调整
    fontSize: 12,
    // height Number | 表头单元格高度
    // 数字类型，单位 px [v1.1.1]调整
    height: 32,
    // borderColor String | 边框颜色
    borderColor: '#f5f5f5',
    // border Boolean | 是否显示边框
    border: true, 
}

多级表头说明：
支持无限嵌套 无需额外配置，根据columns自动识别（判断依据children）；eg：
columns数据结构： 

let columns = [
    {
        "title": "广州一区",
        "children": [
            { "title": "销售", "dataIndex": "广州一区销售", sort: true, },
            { "title": "计划销售", "dataIndex": "广州一区计划销售" },
            { "title": "达成", "dataIndex": "广州一区达成", sort: true }
        ]
    }
]

表格基础配置：（props:tableOpt）

以下全部配置项(默认配置在config.js -> defaultTableOpt)

// 表格整体配置
export const tableOpt = {
    // textAlign String | 内容对齐方式 left center right
    textAlign: 'center',
    // itemHeight Number | 单个cell高度 [v1.0.4移除]：文字自动换行
    // itemHeight: 64, 

    // fontSize Number | 字体大小
    // 数字类型，单位 px [v1.1.1]调整
    fontSize: 12,
    // color String | 字体颜色 
    // 优先级 : 相对columns[item] -> item.bodyColor 低
    color: "#333",
    // emptyText String | 空数据显示的文字内容
    emptyText: '暂无数据',
    // isShowSum Boolean | 是否显示底部统计 默认不显示
    isShowSum: false,
    // stickSide Boolean | 是否固定左侧侧首栏 默认固定
    stickSide: true,
    // sumPlace String | 合计行位置 top / bottom, 仅 isShowSum = true 生效
    sumPlace: 'bottom',
    // borderLeft Boolean | 是否显示竖向边框
    borderLeft: true,
    // borderBottom Boolean | 是否显示竖向边框
    borderBottom: true,
    // borderColor String | 边框颜色
    borderColor: '#f5f5f5'
}

columns说明


columns = [
    {
        title:'xx', //表头文字 支持html模板 eg `<span style='color:red'>区域1</span>`
        dataIndex:'data1', //  对应tableData取值的键 eg： data1 表示拿 tableData里面 键为data1 的值显示
        sort: false, // 可选 默认false 是否排序列（true情况下会出现排序按钮）
        width: 100, // 可选 默认200 Number类型，单元格宽度，表格内容会自动对齐 单位px [v1.1.1]
        color: '#333', // 可选，表头文字颜色
        bodyColor: '#333',// 可选，表格内容行颜色 优先级 : 相对tableOpt -> color 高
        isImage:false, // 可选，默认false， 是否为图片
        height: 32, // 可选，图片高度，仅在 isImage: true 情况下对图片生效 数字类型，单位 px [v1.1.1]调整
        isLink: false, // 可选， 默认false，是否为链接
        customName: '', // 可选，别名配置，默认空字符串  增加别名配置 2022年3月29日 v1.0.2新增
        formatNum:false, // 可选，默认false，是否自动格式化数字(大数字自动添加单位处理) [v1.3.0]调整
        hidden: false, // 可选， 默认 false ，是否隐藏当前列 [v1.1.1]
        textAlign, // 可选 | String | 对应列内容文字对齐方式，优先级比 tableOpt.textAlign 高，不填则取tableOpt.textAlign值，两个都不填，默认 center [v1.1.0]
        titleTextAlign , // 可选 | String | 对应列表头文字对齐方式，优先级比 headerOpt.align 高，不填则取 headerOpt.align 值，两个都不填，默认 center [v1.1.0]
        valueEnum, // 可选 | Object | 字段映射对象，将当前值映射为对应的值[v1.2.0]
        noSum: true, // 可选 | Boolean | 是否计算总计列 | 默认 true | 设置 false 后不计算当前列的总计
        children: [{title: 'xx1',key:'xxx1'},...],
        columnFmt: 'default',  // 数据处理模式(详细请查看更新说明) [v1.3.0]新增 
        columnUnit: '无',  // 详细请查看更新说明[v1.3.0]新增
        useThousandth: false,  // 详细请查看更新说明[v1.3.0]新增
        columnNumberCount:'', // 详细请查看更新说明[v1.3.0]新增
        prefix:'', // 详细请查看更新说明[v1.3.0]新增
        suffix:'', // 详细请查看更新说明[v1.3.0]新增

    },
    ...
]

tableData 说明

tableData = [
    {
        key: '111',
        data1: 'xx1',
        data2: 'xx2',
        GroupKey: '分组名', // [v1.2.0]新增 分组名称, 开启 isGroup 生效
        open: false, // [v1.2.0新增] 当前分组是否展开，开启 isGroup 生效
        children: [
            { key: '112', data1: 'xx12', data2: 'xx13' , children:
                [
                    ...
                ]
            },
            ...
        ],
        ...
    }
]

分页配置

版本 v1.0.3 新增
功能介绍：
简单的功能组件，不喜欢的可以忽略不管，不影响原有功能。

本功能针对表格内部处理，不对外暴露事件；
主要根据传递进去的数据进行分页处理，分页数量计算：树形结构数据只根据第一层计算。
开启后底部会有一个简单的分页组件

新增功能[v1.0.4新增]

增加 props -> currentPage 参数：当前页码，传递数字类型时 内部不做分页处理，并会暴露分页相关事件： @onNextPage , @onPrevPage。
-- 不传递或者传递false 组件内部处理分页。
增加 props -> totalPage 参数： 总页数，

总结：两种用法

  1. 内部处理：props -> currentPage 不传递或者传递 false。
    1. 组件内部对 tableData 做分页处理。不对外暴露分页相关方法
  2. 外部处理：props -> currentPage 传递数字类型，表示当前页
    1. 同时需要传递 props -> totalPage 参数，表示总页数
    2. 对外暴露 onPrevPage 、onNextPage 事件，返回当前页

[v1.0.5]更新 增加分页组件样式配置(config.js -> defaultPagerOpt 新增对应默认配置 ):

  1. pagerOpt -> btnFontSize 按钮文字大小 数字类型，单位 px
  2. pagerOpt -> btnFontColor 按钮文字颜色
  3. pagerOpt -> btnFontBold 按钮文字是否加粗
  4. pagerOpt -> btnCustomClass 按钮自定义类
  5. pagerOpt -> numFontSize 页码字体大小 数字类型，单位 px
  6. pagerOpt -> numFontColor 页码字体颜色

  7. pagerOpt -> numFontBold 页码字体是否加粗

配置项：以下全部配置项(默认配置在config.js -> defaultPagerOpt) 

export const defaultPagerOpt = {
    // show Boolean | 是否启用分页功能 
    show: false,
    // pageSize Number | 每页条数
    pageSize: 10,
    // [v1.0.5]新增 
    // 按钮文字大小
    // 数字类型，单位 px [v1.1.1]调整
    btnFontSize: 12,
    // 按钮文字颜色
    btnFontColor: '#333',
    // 按钮文字是否加粗
    btnFontBold: false,
    // 按钮自定义类
    btnCustomClass:'',
    // 页码文字大小
    // 数字类型，单位 px [v1.1.1]调整
    numFontSize: 12,
    // 页码文字颜色
    numFontColor: '#333',
    // 页码文字是否加粗
    numFontBold: false,
}

event 事件

@onSort 点击排序触发，返回 {sortKey,sortType}

@onClick 点击表格行内容，返回 row, col

@clickMenu 点击表格右上角菜单按钮触发，返回 void

@onNextPage 外部处理分页情况下点击下一页触发，返回当前页码

@onPrevPage 外部处理分页情况下点击上一页触发，返回当前页码

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...