# wyb-table **Repository Path**: howcode/wyb-table ## Basic Information - **Project Name**: wyb-table - **Description**: uni-app表格插件：wyb-table - **Primary Language**: JavaScript - **License**: GPL-3.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 16 - **Created**: 2021-04-16 - **Last Updated**: 2022-05-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #### 一、使用说明 #### 如果想完美使用该组件，请一定一字一句看完整个说明文档！！！ #### 如果想完美使用该组件，请一定一字一句看完整个说明文档！！！ #### 如果想完美使用该组件，请一定一字一句看完整个说明文档！！！ #### 创作不易，喜欢的朋友给个五星好评，这对我很重要鸭╰(￣▽￣)╭ #### 已上传GitHub，大家可以一起开发，完善 1. 解压下载的压缩包，将组件放在项目的components目录下 2. 引用组件 ```html ``` ```javascript 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体验地址：[http://m.wybfiles.cn:82](http://m.wybfiles.cn:82)（请用手机访问，或用桌面浏览器启动手机调试模式） 4. 如果觉得我的插件还不错，可以下载我的插件的示例集合Demo => [传送门](http://tomcat.wybfiles.cn/download/wyb-demo.zip)，里面有我全部的插件以及全部插件的示例工程 #### 二、参数说明 1. 表头 (header) | params | 类型 | 说明 | | ------ | -------------- | ------------------------------------------- | | label | string | 表头显示的文字 | | key | string | 表头的key键值，用于列内容的赋值 | | width | string, number | 该列的列宽，其值可覆盖参数default-col-width | 2. 表格内容 (contents) 　　表格内容的格式见上方**“引用组件”**部分，有一点需要注意：如果单元格的内容为链接，请使用数组形式，例如：`url: ['查看更多', theUrl, {name: '陈二'}]`，数组的第一个元素为要显示的文字，第二个元素为实际要使用的链接。如果链接是项目中的某个页面，那么第三个元素可以传入参数（对象形式） 3. 参数列表（外观型参数） | 参数名 | 类型 | 默认值 | 说明 | 可选值 | | -------------------------- | ------------------ | ------------------------------------------------ | ------------------------------------------------------------ | ----------- | | 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 ```json // 数组中每个元素代表一列，这些列的内容为链接 // 链接类型：route (项目页面路由), link (网址) [{ type: 'route', // 链接类型 key: 'url' // 所在列的key值（表头的key） }, { type: 'http', key: 'link' }] ``` (2) computed-col ```json // 数组中每个元素代表一列（每个元素都是表头的key） ['age', 'score'] // key为'age'与'score'的列需要统计 ``` (3) value-format ```json // 数组中每个元素代表一列，这些列实行条件格式 /** 条件类型（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 ```json // 数组中每个元素代表一列，这些列需要格式化内容 /** 关于template: * #key#代表原来单元格中的值，例如原来的值是19，#age#岁格式化之后是19岁 */ /** 关于bottomComputedFormat： * 底部统计是否也格式化 */ [{ key: 'age', template: '#age#岁', bottomComputedFormat: true }, { key: 'score', template: '#score#分', bottomComputedFormat: false }] ``` (5) sort-col ```json // 数组中每个元素代表一列，这些列可以作为排序的基准 // 这些列的表头会出现排序的图标 [{ key: 'name', // 所在列的key值（表头的key） isNumber: false // 该列数据是不是数字或者日期，日期例子：(2020-09-04 08:00) (2020/06/04) (08:00:06) }, { key: 'age', isNumber: true }] ``` (6) sort-ways ```json ['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 | 选择行时触发（启用选择后有效） | 见下方 | ```json // @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": "" } } ``` ```json // @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) 如果对项目体积不敏感或者嫌麻烦，可以不用动