0.2.61 • Published 4 days ago

shuyilink-ui v0.2.61

Weekly downloads
-
License
ISC
Repository
-
Last release
4 days 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.61

4 days ago

0.2.60

26 days ago

0.2.59

2 months ago

0.2.58

3 months ago

0.2.57

5 months ago

0.2.56

5 months ago

0.2.55

5 months ago

0.2.54

5 months ago

0.2.53

5 months ago

0.2.52

5 months ago

0.2.51

7 months ago

0.2.50

8 months ago

0.2.41

11 months ago

0.2.40

11 months ago

0.2.49

8 months ago

0.2.48

9 months ago

0.2.47

9 months ago

0.2.46

9 months ago

0.2.45

10 months ago

0.2.44

10 months ago

0.2.43

10 months ago

0.2.42

11 months ago

0.2.39

12 months ago

0.2.27

1 year ago

0.2.26

1 year ago

0.2.25

1 year ago

0.2.24

1 year ago

0.2.23

1 year ago

0.2.22

1 year ago

0.2.21

1 year ago

0.2.20

1 year ago

0.2.19

1 year ago

0.2.18

1 year ago

0.2.17

1 year ago

0.2.16

1 year ago

0.2.15

1 year ago

0.2.14

1 year ago

0.2.30

1 year ago

0.0.10

1 year ago

0.0.11

1 year ago

0.0.12

1 year ago

0.2.38

1 year ago

0.2.37

1 year ago

0.2.36

1 year ago

0.2.35

1 year ago

0.2.34

1 year ago

0.2.33

1 year ago

0.2.32

1 year ago

0.2.31

1 year ago

0.2.29

1 year ago

0.2.28

1 year ago

0.1.110

1 year ago

0.1.112

1 year ago

0.1.111

1 year ago

0.2.13

1 year ago

0.2.12

1 year ago

0.2.11

1 year ago

0.2.10

1 year ago

0.1.98

2 years ago

0.1.99

2 years ago

0.1.107

1 year ago

0.1.106

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.108

1 year ago

0.1.103

1 year ago

0.1.102

1 year ago

0.1.105

1 year ago

0.1.104

1 year ago

0.2.7

1 year ago

0.2.6

1 year ago

0.2.9

1 year ago

0.2.8

1 year ago

0.2.3

1 year ago

0.2.2

1 year ago

0.2.5

1 year ago

0.2.4

1 year ago

0.1.96

2 years ago

0.1.97

2 years ago

0.1.90

2 years ago

0.1.91

2 years ago

0.1.92

2 years ago

0.1.93

2 years ago

0.1.94

2 years ago

0.1.95

2 years ago

0.1.85

2 years ago

0.1.86

2 years ago

0.1.87

2 years ago

0.1.88

2 years ago

0.1.89

2 years ago

0.1.83

2 years ago

0.1.84

2 years ago

0.1.80

2 years ago

0.1.81

2 years ago

0.1.82

2 years ago

0.1.74

2 years ago

0.1.75

2 years ago

0.1.76

2 years ago

0.1.77

2 years ago

0.1.78

2 years ago

0.1.79

2 years ago

0.1.70

2 years ago

0.1.71

2 years ago

0.1.72

2 years ago

0.1.73

2 years ago

0.1.63

2 years ago

0.1.64

2 years ago

0.1.65

2 years ago

0.1.66

2 years ago

0.1.67

2 years ago

0.1.68

2 years ago

0.1.69

2 years ago

0.1.61

2 years ago

0.1.62

2 years ago

0.1.55

2 years ago

0.1.56

2 years ago

0.1.57

2 years ago

0.1.58

2 years ago

0.1.59

2 years ago

0.1.60

2 years ago

0.1.52

2 years ago

0.1.53

2 years ago

0.1.54

2 years ago

0.1.50

2 years ago

0.1.51

2 years ago

0.1.49

2 years ago

0.1.41

2 years ago

0.1.42

2 years ago

0.1.43

2 years ago

0.1.44

2 years ago

0.1.45

2 years ago

0.1.46

2 years ago

0.1.47

2 years ago

0.1.48

2 years ago

0.1.40

2 years ago

0.1.38

2 years ago

0.1.39

2 years ago

0.1.34

2 years ago

0.1.35

2 years ago

0.1.36

2 years ago

0.1.37

2 years ago

0.1.30

2 years ago

0.1.31

2 years ago

0.1.32

2 years ago

0.1.33

2 years ago

0.1.27

2 years ago

0.1.28

2 years ago

0.1.29

2 years ago

0.1.26

2 years ago

0.1.25

2 years ago

0.1.24

2 years ago

0.1.23

2 years ago

0.1.22

2 years ago

0.1.21

2 years ago

0.1.20

2 years ago

0.1.19

2 years ago

0.1.18

2 years ago

0.1.17

2 years ago

0.1.16

2 years ago

0.1.15

2 years ago

0.1.14

2 years ago

0.1.13

2 years ago

0.1.12

2 years ago

0.1.11

2 years ago

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago