定制表格组件技术文档

简介

目的: 定制表格组件开发是为解决三方表格组件在性能低的平台下，出现渲染慢、卡顿现象。

思路: 该组件基于div + flex布局，模拟表格布局及操作。实行单层数据传递，减少组件多层嵌套、数据传递监听带来的性能损耗。

优化: 尽可能传入配置数据，减少单组件内部计算及样式重排重绘，提升大数据量情况下的性能。

安装

npm install shuyilink-ui

引入组件

import Vue from 'vue'
import ShuyilinkUI from 'shuyilink-ui'
import 'shuyilink-ui/shuyilink-ui.css'
Vue.use(ShuyilinkUI)

插入组件

<sy-table
  :data="tableData"
  :setting="tableSetting"
/>

<script>
export default {
  data: {
    return {
      tableData: [],
      tableSetting: []
    }
  },
  mounted() {
    this.getTableTitles()
  },
  methods: {
    getTableTitles() {
      this.tableSetting = [
        {
          label: '呼叫人',
          val: 'callStaffName'
        },
        {
          label: '被呼叫人',
          width: 100,
          val: 'calledStaffName'
        },
        {
          label: '呼叫时间',
          width: 160,
          val: 'callTime'
        }
      ]
    }
  }
}
</script>

配置参数 [props]

• data: type: Array default: [] 接口获取的表格数据列表，格式如下:

[
  {id: '', productName: '', productCode: '', ...},
  ...
]

• setting: 表格配置 type: Array default: [] 示例

  [
    {
      label: '产品名称', // 表头标题
      width: 60, // 单元格列宽: Number || String
      val: 'productName', // 取值属性
      fixed: true, // 是否固定列
      fixedLeft: 90, // 固定左侧距离(左侧固定)
      fixedRight: 60, // 固定右侧距离(右侧固定)
      fixedLast: true, // 是否为单侧最后一个固定项
      template: true // 是否为html字符串模板
    },
    ...
  ]

• selectionMultiple: 是否为多选 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-multiple
  />

• selectionToggle: 单选情况下: 是否可切换选择/不选择 type: Boolean default: true 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    :selection-toggle="false"
  />

• selectionAllShow: 是否显示表头全勾选框 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-all-show
  />

• selectionShow: 是否显示勾选列 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-show
  />

• selectionFixed: 勾选列固定左侧 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-fixed
  />

• selectionHighlight: 勾选高亮当前行 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    click-to-select
    selection-highlight
  />

• indexShow: 是否显示索引列 type: Boolean default: true 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    :index-show="false"
  />

• indexFixed: 索引列固定左侧 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    index-fixed
  />

• highlightCurrentRow: 是否高亮当前行 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    highlight-current-row
  />

• clickToSelect: 点击行的时候是否要选中行 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    click-to-select
  />

• height: 表格高度 type: String default: '' // 样式表默认100% 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    height="500px"
  />

• scrollSize: 表格主体滚动条尺寸 [宽度, 高度] type: Array default: [10, 10] // 默认宽高10px 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    :scroll-size="[20, 20]"
  />

• indexText: 索引列表头文字 type: String default: 'NO.' 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    index-text="序号"
  />

• cellWrap: 表格主体单元格字符换行 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    cell-wrap
  />

• headWrap: 表格头部单元格字符换行 type: Boolean default: false 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    head-wrap
  />

事件触发

• row-click: 行点击 参数: row 当前行数据 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    @row-click="rowClick"
  />
  
  <script>
  export default {
    data() {
      return {
        clickedRow: null
      }
    },
    methods: {
      rowClick(row) {
        this.clickedRow = row
      }
    }
  }
  </script>

• select: 选择/取消选择 参数: selectedRows 勾选的列表 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-show
    @select="select"
  />
  
  <script>
  export default {
    data() {
      return {
        checkRow: {}
      }
    },
    methods: {
      // 选择行中的复选框
      select(selectedRows) {
        this.checkRow = selectedRows.length ? selectedRows[0] : {}
      },
    }
  }
  </script>

• select-all: 全选/全不选 参数: selectAllChecked 全选状态 示例

  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-show
    selection-all-show
    selection-multiple
    @select="select"
    @select-all="selectAll"
  />
  
  <script>
  export default {
    data() {
      return {
        selectedRows: []
      }
    },
    methods: {
      // 列表勾选
      select() {
        this.selectedRows = this.tableData.filter(item => item.checked)
      },
      // 选择全选/全不选
      selectAll(selectedRows) {
        this.selectedRows = selectedRows
      }
    }
  }
  </script>

样式调整

需针对子组件样式穿透，进行表格样式重置修改 以下component-root-class样式名为当前组件根样式类名

• 表头

  .component-root-class ::v-deep .div-table .div-table-head .item .col {
    height: 80px;
    font-size: 12px;
    ...
  }

• 表格主体单元格

  .component-root-class ::v-deep .div-table .div-table-body .item .col {
    height: 80px;
    font-size: 16px;
    ...
  }

更多样式调整请参看表格样式源码