suitTable 表格

背景

为了实现小程序表格显示

使用示例

<template>
  <view>
    <suit-table
      ref="table"
      :showVertBorder="false"
      :headerWeight="false"
      :columns="columns"
      :first-line-fixed="true"
      :data="tableList"
      :diffHeight="60"
    />
  </view>
</template>
<script>
import { setTemplateFilter } from '@/utils/template.js'; //引入过滤器注册方法
export default {
  data() {
    //   通过注册方法，自定义模板过滤器  第一个参数为过滤器名称，第二个值为回调函数(返回内容值和过滤器参数值)
    setTemplateFilter('toFixed', (item, filterParams) => {
      return item.toFixed(filterParams)
    });
    return {
      height: null,
      tableList: [],
      columns: [
        {
          label: '盾构区间',
          key: 'shdIntervalName',
          template:
            '<div class="shield-interval"><p class="title">{{shdIntervalName}}</p><p class="value">{{tendersName}}</p></div>',
          width: 288,
        },
        {
          label: '当日',
          key: 'todayCompleteRing',
        },
        {
          label: '累计',
          key: 'totalCompleteRing',
        },
        {
          label: '设计',
          key: 'designRing',
        },
        {
          label: '比例',
          key: 'totalComplete',
          template: '<span>{{totalComplete | toFixed | 2 }}</span>',
        },
        {
          label: '始发日期',
          key: 'startDate',
          template: '<span>{{startDate | parseTime | {y}-{m}-{d} }}</span>',
          width: 200,
        },
        {
          label: '接收日期',
          key: 'receiveDate',
          template: '<span>{{receiveDate | parseTime | {y}-{m}-{d} }}</span>',
          width: 200,
        },
        {
          label: '平均速率',
          key: 'averageRate',
          template: '<span>{{totalComplete | toFixed | 2 }}</span>',
        },
        {
          label: '备注',
          key: 'remark',
          width: 400,
        },
      ],
    };
  },
  onLoad(options) {},
  mounted() {},
  methods: {},
};
</script>

参数说明

表头 (columns)

属性	描述	类型	可选值	默认值
label	表头显示的文字	string	—	—
key	表头的key键值，用于列内容的赋值	string	—	—
width	该列的列宽，其值可覆盖参数default-col-width	string,number	—
template	自定义表格内容模板显示(用法个卡片一致)，详情可查看以上示例	string	— —

表格内容 (data)

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

属性	描述	类型	可选值	默认值
data	表格中的数据	Array[]	-	[{name: '张三'}, {name: '李四'}]

参数列表（外观型参数）

属性	描述	类型	可选值	默认值
width	表格宽度，默认为屏幕宽度，格式同css	string	—	${uni.getSystemInfoSync().screenWidth}px
height	表格高度，格式同css	string	—	auto
diffHeight	表格差异高度，最终计算出的高度是屏幕高度减去这个值	string|number	—	-
font-size	表格字体大小，第一个元素是表头字体大小，第二个元素时表格内容字体大小，如果像默认值这种只传一个元素，那么表格中所有字体大小都是该元素,单位px	Array[]	—	[14]
header-weight	表头是否加粗	boolean	true, false	true
min-height	表格最小行高，超出自动增高,第一个元素是表头最小行高，第二个元素时表格内容最小行高,如果像默认值这种只传一个元素，那么表格中所有行的最小行高都是该元素	Array[]	—	[100]
default-col-width	表格中所有列的列宽，其值可被headers数组的元素中的width覆盖	string, number	—	165
enableCheck	表格数据首部是否显示选择框	String	—	—
borderBottom	表头下边框是否显示	Boolean	true,false	true
stripe	表格中的数据的背景条纹色	Boolean	false	true,false
header-bg-color	表头背景色	hexColor, rgbColor		#ffffff
content-bg-color	表格内容背景色	hexColor, rgbColor	—	#fff
header-ft-color	表头文字颜色	hexColor, rgbColor	—	#3e3e3e
content-ft-color	表格内容文字颜色	hexColor, rgbColor	—	rgba(0, 0, 0, 0.65)
link-color	表格内容为链接时的颜色	hexColor, rgbColor	—	#0024c8
first-col-bg-color	首列背景色	hexColor, rgbColor	—	ffffff
border-color	表格框线的颜色	hexColor, rgbColor	—	e1e1e1
show-left-and-right-border	是否显示表格两侧的边框，这个参数主要是考虑到表格的宽度是屏宽时，两侧有边框不太好看	boolean	true, false	false
show-vert-border	是否显示单元格的垂直方向的框线	boolean	true, false	true
show-header	是否显示表格头部	boolean	true, false	true
borderRadius	是否显示表格弧度	Boolen	true, false	false
loader-size	加载动画的大小（单位：rpx）	string, number	—	50
loader-color	加载动画的颜色（必须是#a3a3a3这种16进制的形式）	hexColor	—	#a3a3a3
loader-bg-color	加载时的表格背景色	hexColor, rgbColor	—	#f8f8f8
check-col-width	checkbox列的列宽	string, number	—	70
checker-color	checkbox里面对勾的颜色	hexColor, rgbColor	—	#3e3e3e
checker-border-color	checkbox边框的颜色	hexColor, rgbColor	—	#d3d3d3
checker-bg-color	checkbox里面对勾周围的填充颜色	hexColor, rgbColor	—	rgba(0, 0, 0, 0)
checker-box-bg-color	checkbox的背景色	hexColor, rgbColor	—	rgba(0, 0, 0, 0)
checker-cell-bg-color	checkbox单元格的背景色	hexColor, rgbColor	—	#f1f1f1

参数列表（功能型参数）

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

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

(5) sort-ways

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

(6) loading

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

事件

事件名称	说明	回调参数
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
      }
    }
  ]
}

ref

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

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

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

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

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

源码及综合示例参考

组件源码 (opens new window)template 方法参考 (opens new window)