更新记录

1.1.0（2020-10-29）

修复底部边框bug

1.0.9（2020-09-25）

日常维护

1.0.8（2020-09-04）

修复日期无法排序的bug

查看更多

平台兼容性

一、使用说明

如果想完美使用该组件，请一定一字一句看完整个说明文档！！！

如果想完美使用该组件，请一定一字一句看完整个说明文档！！！

如果想完美使用该组件，请一定一字一句看完整个说明文档！！！

创作不易，喜欢的朋友给个五星好评，这对我很重要鸭╰(￣▽￣)╭

已上传Gitee，大家可以一起开发、完善这个插件

  1. 解压下载的压缩包，将组件放在项目的components目录下

  2. 引用组件

    <wyb-table ref="table" :headers="headers" :contents="contents" height="600rpx" :url-col="urlCol" />
    import wybTable from '@/components/wyb-table/wyb-table.vue'
export default {
    components: {
        wybTable
    },
    data() {
        const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
        const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
        return {
            headers: [{
                label: '姓名',
                key: 'name'
            }, {
                label: '年龄',
                key: 'age'
            }, {
                label: '学院',
                key: 'collage'
            }, {
                label: '成绩',
                key: 'score'
            }, {
                label: '路由',
                key: 'url'
            }, {
                label: '网址',
                key: 'link'
            }],
            contents: [{
                name: '刘一',
                age: '',
                collage: '信息学院',
                score: '99',
                url: ['查看更多', theUrl],
                link: ''
            }, {
                name: '陈二',
                age: '18',
                collage: '商学院',
                score: '98',
                url: ['我带参数', theUrl, {name: '陈二'}],
                link: ''
            }, {
                name: '张三',
                age: '22',
                collage: '统计与数学学院',
                score: '97',
                url: ['查看更多', theUrl],
                link: ''
            }, {
                name: '李四',
                age: '19',
                collage: '城市与环境学院',
                score: '96',
                url: '',
                link: ['访问网址', httpUrl]
            }, {
                name: '王五',
                age: '20',
                collage: '旅游与酒店管理学院',
                score: '95',
                url: ['查看更多', theUrl],
                link: ''
            }, {
                name: '赵六 ',
                age: '20',
                collage: '',
                score: '88',
                url: ['查看更多', theUrl],
                link: ''
            }, {
                name: '孙七',
                age: '21',
                collage: '',
                score: '95',
                url: '',
                link: ['访问网址', httpUrl]
            }, {
                name: '周八 ',
                age: '21',
                collage: '会计学院',
                score: '85',
                url: ['查看更多', theUrl],
                link: ''
            }, {
                name: '吴九 ',
                age: '20',
                collage: '',
                score: '91',
                url: ['查看更多', theUrl],
                link: ''
            }, {
                name: '郑十',
                age: '19',
                collage: '',
                score: '95',
                url: '',
                link: ['访问网址', httpUrl]
            }],
            urlCol: [{
                type: 'route',
                key: 'url'
            }, {
                type: 'http',
                key: 'link'
            }]
        }
    }
}

  3. Demo体验地址：点我访问（请用手机访问，或用桌面浏览器启动手机调试模式）

  4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => 传送门，里面有我全部的插件以及全部插件的示例工程

二、参数说明

  1. 表头 (header)

    params 类型 说明
    label string 表头显示的文字
    key string 表头的key键值，用于列内容的赋值
    width string, number 该列的列宽，其值可覆盖参数default-col-width

  1. 表格内容 (contents)

    表格内容的格式见上方“引用组件”部分，有一点需要注意：如果单元格的内容为链接，请使用数组形式，例如：url: ['查看更多', theUrl, {name: '陈二'}]，数组的第一个元素为要显示的文字，第二个元素为实际要使用的链接。如果链接是项目中的某个页面，那么第三个元素可以传入参数（对象形式）

  2. 参数列表（外观型参数）

    参数名 类型 默认值 说明 可选值
    width string `${uni.getSystemInfoSync()
    .screenWidth}px`    		 表格宽度，默认为屏幕宽度，格式同css
    height string 'auto' 表格高度，格式同css（如果想让表格可以纵向滚动并且表头固定，这个参数必须传一个具体值）
    font-size array [30] 表格字体大小
    第一个元素是表头字体大小，第二个元素时表格内容字体大小
    如果像默认值这种只传一个元素，那么表格中所有字体大小都是该元素
    header-weight boolean true 表头是否加粗 true, false
    min-height array [70] 表格最小行高，超出自动增高
    第一个元素是表头最小行高，第二个元素时表格内容最小行高
    如果像默认值这种只传一个元素，那么表格中所有行的最小行高都是该元素
    col-width array [165] 1.0.6版本该参数已弃用
    表格列宽
    每个元素代表每一列的列宽
    如果像默认值这种只传一个元素，那么表格中列的列宽都是该元素
    default-col-width string, number 165 表格中所有列的列宽，其值可被headers数组的元素中的width覆盖
    header-bg-color hexColor, rgbColor '#f1f1f1' 表头背景色
    content-bg-color hexColor, rgbColor '#fff' 表格内容背景色
    header-ft-color hexColor, rgbColor '#3e3e3e' 表头文字颜色
    content-ft-color hexColor, rgbColor '#3e3e3e' 表格内容文字颜色
    link-color hexColor, rgbColor '#0024c8' 表格内容为链接时的颜色
    first-col-bg-color hexColor, rgbColor '#f1f1f1' 首列背景色
    border-color hexColor, rgbColor '#e1e1e1' 表格框线的颜色
    show-left-and-right-border boolean false 是否显示表格两侧的边框，这个参数主要是考虑到表格的宽度是屏宽时，两侧有边框不太好看 true, false
    show-vert-border boolean true 是否显示单元格的垂直方向的框线 true, false
    loader-size string, number 50 加载动画的大小（单位：rpx）
    loader-color hexColor '#a3a3a3' 加载动画的颜色（必须是#a3a3a3这种16进制的形式）
    loader-bg-color hexColor, rgbColor '#f8f8f8' 加载时的表格背景色
    check-col-width string, number 70 checkbox列的列宽
    checker-color hexColor, rgbColor '#3e3e3e' checkbox里面对勾的颜色
    checker-border-color hexColor, rgbColor '#d3d3d3' checkbox边框的颜色
    checker-bg-color hexColor, rgbColor 'rgba(0, 0, 0, 0)' checkbox里面对勾周围的填充颜色
    checker-box-bg-color hexColor, rgbColor 'rgba(0, 0, 0, 0)' checkbox的背景色
    checker-cell-bg-color hexColor, rgbColor '#f1f1f1' checkbox单元格的背景色

  3. 参数列表（功能型参数）

    参数名 类型 默认值 说明 可选值
    empty-string string '-' 单元格判空时显示的字符
    first-line-fixed boolean false 是否固定首列 true, false
    text-align string 'center' 单元格内容对齐方式 center, left, right
    padding array [5, 10] 单元格内间距
    第一个元素是垂直间距，第二个元素是水平间距
    只传入一个元素时，垂直与水平间距均为该元素
    url-col array [] 内容为链接的列的标注，用于告诉组件哪些列是链接 格式见下方说明
    computed-col array [] 需要统计的列的标注，用于告诉组件哪些列需要统计
    不填时不显示底部统计，填了才显示    		 格式见下方说明
    bottom-computed-fixed boolean true 是否固定底部统计 true, false
    value-format array [] 条件格式标注，用于展示表格数据的条件格式（例如满足什么条件，文本显示什么颜色） 格式见下方说明
    format-col array [] 需要格式化内容的列的标注，用于告诉组件哪些列需要格式化内容 格式见下方说明
    sort-col array [] 表格以哪些列为排序基准的标注，用于告诉组件哪些列可以作为排序的标准 格式见下方说明
    sort-ways array ['none', 'asc', 'inv'] 排序方式，默认值代表：初始化时不进行排序，点一下表头升序排列，再点一下表头降序排列，再点一下恢复无序，使用方法见下方说明 格式见下方说明
    loading boolean false 控制表格是否显示加载动画，使用方法见下方说明 true, false
    enable-check string '' 控制表格是否开启选择功能 multiple, single
    或者不填

    参数格式说明：

    (1) url-col

    // 数组中每个元素代表一列，这些列的内容为链接
// 链接类型：route (项目页面路由), link (网址)
[{
    type: 'route', // 链接类型
    key: 'url'     // 所在列的key值（表头的key）
}, {
    type: 'http',
    key: 'link'
}]

    (2) computed-col

    // 数组中每个元素代表一列（每个元素都是表头的key）
['age', 'score'] // key为'age'与'score'的列需要统计

    (3) value-format

    // 数组中每个元素代表一列，这些列实行条件格式
/** 条件类型（type）：
 * bigger (单元格内容大于某个值实行条件格式，单元格内容必须为纯数字或数字字符串)
 * smaller (单元格内容小于某个值实行条件格式，单元格内容必须为纯数字或数字字符串)
 * range (单元格内容在某个不包括端点的范围内实行条件格式，单元格内容必须为纯数字或数字字符串)
 * equal (单元格内容等于某个值实行条件格式)
 * average-bigger (单元格内容大于这一列的平均值实行条件格式，单元格内容必须为纯数字或数字字符串)
 * average-smaller (单元格内容小于这一列的平均值实行条件格式，单元格内容必须为纯数字或数字字符串)
 * average-equal (单元格内容等于这一列的平均值实行条件格式，单元格内容必须为纯数字或数字字符串)
 */
/** 关于range：
  * type = bigger | smaller | equal 时，range为一数字，例如下面的第一个元素
  * type = range 时，range为一数组，例如下面的第二个元素
  * type = average-* 时，range不填写，例如下面的第三个元素
  */
/** 关于key：
  * 目前仅能实现每列一个条件格式，每列多个条件格式暂时无法实现
  * 所以，数组中如果出现多个一样的key，取索引值最小的条件格式进行渲染
  */
/** 关于style:
  * 有两个参数：
  * color => 文本颜色
  * bgColor => 单元格背景色
  * 可一起使用，例如下面的第一个元素
  * 可单独使用，例如下面的第二、第三个元素
  */
[{
    type: 'bigger',
    range: 20,
    key: 'level',
    style: {
        color: '#00f',
        bgColor: '#e1f0ff'
    }
}, {
    type: 'range',
    range: [19, 25],
    key: 'age',
    style: {
        color: '#f00'
    }
}, {
    type: 'average-smaller',
    key: 'score',
    style: {
        bgColor: '#e1f0ff'
    }
}]

    (4) format-col

    // 数组中每个元素代表一列，这些列需要格式化内容
/** 关于template:
      * #key#代表原来单元格中的值，例如原来的值是19，#age#岁格式化之后是19岁
      */
/** 关于bottomComputedFormat：
      * 底部统计是否也格式化
      */
[{
    key: 'age',
    template: '#age#岁',
    bottomComputedFormat: true
}, {
    key: 'score',
    template: '#score#分',
    bottomComputedFormat: false
}]

    (5) sort-col

    // 数组中每个元素代表一列，这些列可以作为排序的基准
// 这些列的表头会出现排序的图标
[{
    key: 'name',    // 所在列的key值（表头的key）
    isNumber: false // 该列数据是不是数字或者日期，日期例子：(2020-09-04 08:00) (2020/06/04) (08:00:06)
}, {
    key: 'age',
    isNumber: true
}]

    (6) sort-ways

    ['none', 'asc', 'inv']
/** 元素说明
  * none：不排序
  * asc：升序
  * inv：降序
  */
/** 为什么是这种格式？
  * 在点击可以作为排序基准列的表头时，排序方式会在这个数组中切换
  * 第一个元素代表表格初始化时候的排序方式
  * 例如，表格刚初始化的时候是无序的，因为第一个元素是none，然后你点了可以作为排序基准列的表头，这时表格会按升序排列，因为第二个元素是asc；之后你又点这个表头，这时表格会按降序排列，因为最后一个元素是inv；如果你又点了一次表头，表格就会恢复为无序状态；再点这个表头，以此类推
  * 另外，如果在你点击过可以作为排序基准列的表头之后（无论点了几次），你点了另外一个可以作为排序基准列的表头，这时排序方式会变成数组中的第二个元素，在上面描述的情景中，排序方式会变成升序，因为第二个元素是asc
  */
/** 我应该怎么传值？
  * 类似 ['asc', 'inv', 'none']、['inv', 'none', 'asc']都可以，只要是这三个字符串的排列组合都可以。但是不能出现其他字符串
  */

    (7) loading

    这个参数主要是用在等待数据加载的，传入true时显示loading动画并隐藏表格，传入false时显示表格并隐藏loading动画。

5. Event

事件名 说明 返回值
@onCellClick 点击单元格时触发 见下方
@onCheck 选择行时触发（启用选择后有效） 见下方 
// @onCellClick
{
  "content": "18",    // 单元格内容
  "contentIndex": 1,  // 单元格行索引
  "header": "年龄",    // 表头内容
  "headerIndex": 1,   // 单元格列索引
  "key": "age"        // 单元格所在列的key
  "lineData": {       // 这一行的所有数据
    "name": "陈二",
    "age": "18",
    "collage": "商学院",
    "score": "98",
    "url": [
      "我带参数",
      "/pages/demos/noticeBar-demo/more",
      {
        "name": "陈二"
      }
    ],
    "link": ""
  }
}
// @onCheck
{
  "checkType": "multiple", // 启用的类型（多选 => multiple / 单选 => single）
  "data": [
    {
      "index": 0,
      "lineData": { // 这一行的数据
        "name": "刘一",
        "age": "",
        "collage": "信息学院",
        "score": 99,
        "url": [
          "查看更多",
          "/pages/demos/noticeBar-demo/more"
        ],
        "link": "",
        "checked": true
      }
    }
  ]
}

6. 可使用ref调用的组件本身的方法

(1) this.$refs.table.getAverage(key)

返回某个数字列的平均值，传入该列的key

(2) this.$refs.table.getTotal(key)

返回某个数字列的总和，传入该列的key

三、作者的话

  1. 创作不易，喜欢的朋友给个五星好评，这对我很重要鸭

  2. 有什么问题可以加我QQ：751551976，或者发邮件：wyb_goodluck@163.com

  3. 因为包含了中文字符表（用于首字母排序），所以插件体积较大。如果用不到排序可以删掉插件包中的characterToPinyin.js文件，并将插件源码中的几个地方注释掉：

    (1) 第195行import Pinyin from './characterToPinyin.js'

    (2) 第711行this.doSort(this.sortCol[0].key, this.sortWays[this.sortWay], this.sortCol[0].isNumber)

    (3) 第715行整个doSort()方法注释

    (4) 如果对项目体积不敏感或者嫌麻烦，可以不用动

隐私、权限声明

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

无

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

无

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

无

许可协议

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

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

加载更多...