0.2.70 • Published 10 months ago

shuyilink-ui v0.2.70

Weekly downloads
-
License
ISC
Repository
-
Last release
10 months ago

定制表格组件技术文档

简介

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

思路: 该组件基于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;
      ...
    }
    更多样式调整请参看表格样式源码
0.2.70

10 months ago

0.2.69

10 months ago

0.2.68

10 months ago

0.2.67

10 months ago

0.2.66

10 months ago

0.2.65

10 months ago

0.2.64

10 months ago

0.2.63

12 months ago

0.2.62

1 year ago

0.2.61

1 year ago

0.2.60

1 year ago

0.2.59

1 year ago

0.2.58

2 years ago

0.2.57

2 years ago

0.2.56

2 years ago

0.2.55

2 years ago

0.2.54

2 years ago

0.2.53

2 years ago

0.2.52

2 years ago

0.2.51

2 years ago

0.2.50

2 years ago

0.2.41

2 years ago

0.2.40

2 years ago

0.2.49

2 years ago

0.2.48

2 years ago

0.2.47

2 years ago

0.2.46

2 years ago

0.2.45

2 years ago

0.2.44

2 years ago

0.2.43

2 years ago

0.2.42

2 years ago

0.2.39

2 years ago

0.2.27

2 years ago

0.2.26

2 years ago

0.2.25

2 years ago

0.2.24

2 years ago

0.2.23

2 years ago

0.2.22

2 years ago

0.2.21

2 years ago

0.2.20

2 years ago

0.2.19

3 years ago

0.2.18

3 years ago

0.2.17

3 years ago

0.2.16

3 years ago

0.2.15

3 years ago

0.2.14

3 years ago

0.2.30

2 years ago

0.0.10

3 years ago

0.0.11

3 years ago

0.0.12

3 years ago

0.2.38

2 years ago

0.2.37

2 years ago

0.2.36

2 years ago

0.2.35

2 years ago

0.2.34

2 years ago

0.2.33

2 years ago

0.2.32

2 years ago

0.2.31

2 years ago

0.2.29

2 years ago

0.2.28

2 years ago

0.1.110

3 years ago

0.1.112

3 years ago

0.1.111

3 years ago

0.2.13

3 years ago

0.2.12

3 years ago

0.2.11

3 years ago

0.2.10

3 years ago

0.1.98

3 years ago

0.1.99

3 years ago

0.1.107

3 years ago

0.1.106

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago

0.1.108

3 years ago

0.1.103

3 years ago

0.1.102

3 years ago

0.1.105

3 years ago

0.1.104

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.1.96

3 years ago

0.1.97

3 years ago

0.1.90

3 years ago

0.1.91

3 years ago

0.1.92

3 years ago

0.1.93

3 years ago

0.1.94

3 years ago

0.1.95

3 years ago

0.1.85

3 years ago

0.1.86

3 years ago

0.1.87

3 years ago

0.1.88

3 years ago

0.1.89

3 years ago

0.1.83

3 years ago

0.1.84

3 years ago

0.1.80

3 years ago

0.1.81

3 years ago

0.1.82

3 years ago

0.1.74

3 years ago

0.1.75

3 years ago

0.1.76

3 years ago

0.1.77

3 years ago

0.1.78

3 years ago

0.1.79

3 years ago

0.1.70

3 years ago

0.1.71

3 years ago

0.1.72

3 years ago

0.1.73

3 years ago

0.1.63

3 years ago

0.1.64

3 years ago

0.1.65

3 years ago

0.1.66

3 years ago

0.1.67

3 years ago

0.1.68

3 years ago

0.1.69

3 years ago

0.1.61

3 years ago

0.1.62

3 years ago

0.1.55

3 years ago

0.1.56

3 years ago

0.1.57

3 years ago

0.1.58

3 years ago

0.1.59

3 years ago

0.1.60

3 years ago

0.1.52

3 years ago

0.1.53

3 years ago

0.1.54

3 years ago

0.1.50

3 years ago

0.1.51

3 years ago

0.1.49

3 years ago

0.1.41

3 years ago

0.1.42

3 years ago

0.1.43

3 years ago

0.1.44

3 years ago

0.1.45

3 years ago

0.1.46

3 years ago

0.1.47

3 years ago

0.1.48

3 years ago

0.1.40

3 years ago

0.1.38

4 years ago

0.1.39

3 years ago

0.1.34

4 years ago

0.1.35

4 years ago

0.1.36

4 years ago

0.1.37

4 years ago

0.1.30

4 years ago

0.1.31

4 years ago

0.1.32

4 years ago

0.1.33

4 years ago

0.1.27

4 years ago

0.1.28

4 years ago

0.1.29

4 years ago

0.1.26

4 years ago

0.1.25

4 years ago

0.1.24

4 years ago

0.1.23

4 years ago

0.1.22

4 years ago

0.1.21

4 years ago

0.1.20

4 years ago

0.1.19

4 years ago

0.1.18

4 years ago

0.1.17

4 years ago

0.1.16

4 years ago

0.1.15

4 years ago

0.1.14

4 years ago

0.1.13

4 years ago

0.1.12

4 years ago

0.1.11

4 years ago

0.1.10

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago