shuyilink-ui/README.md

shuyilink UI组件库

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

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

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

#### 安装
```js
npm install shuyilink-ui

```
#### 引入组件
```js
import Vue from 'vue'
import ShuyilinkUI from 'shuyilink-ui'
import 'shuyilink-ui/shuyilink-ui.css'
Vue.use(ShuyilinkUI)

```
#### 插入组件
```vue
<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: []
  接口获取的表格数据列表，格式如下:
```js
[
  {id: '', productName: '', productCode: '', ...},
  ...
]
```
- **setting:** 表格配置
  type: Array
  default: []
  示例
  ```js
  [
    {
      label: '产品名称', // 表头标题
      width: 60, // 单元格列宽: Number || String
      val: 'productName', // 取值属性
      fixed: true, // 是否固定列
      fixedLeft: 90, // 固定左侧距离(左侧固定)
      fixedRight: 60, // 固定右侧距离(右侧固定)
      fixedLast: true, // 是否为单侧最后一个固定项
      template: true // 是否为html字符串模板
    },
    ...
  ]
  ```

- **selectionMultiple:** 是否为多选
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-multiple
  />
  ```

- **selectionToggle:** 单选情况下: 是否可切换选择/不选择
  type: Boolean
  default: true
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    :selection-toggle="false"
  />
  ```

- **selectionAllShow:** 是否显示表头全勾选框
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-all-show
  />
  ```

- **selectionShow:** 是否显示勾选列
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-show
  />
  ```

- **selectionFixed:** 勾选列固定左侧
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    selection-fixed
  />
  ```

- **selectionHighlight:** 勾选高亮当前行
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    click-to-select
    selection-highlight
  />
  ```

- **indexShow:** 是否显示索引列
  type: Boolean
  default: true
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    :index-show="false"
  />
  ```

- **indexFixed:** 索引列固定左侧
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    index-fixed
  />
  ```

- **highlightCurrentRow:** 是否高亮当前行
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    highlight-current-row
  />
  ```

- **clickToSelect:** 点击行的时候是否要选中行
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    click-to-select
  />
  ```

- **height:** 表格高度
  type: String
  default: '' // 样式表默认100%
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    height="500px"
  />
  ```

- **scrollSize:** 表格主体滚动条尺寸 [宽度, 高度]
  type: Array
  default: [10, 10] // 默认宽高10px
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    :scroll-size="[20, 20]"
  />
  ```

- **indexText:** 索引列表头文字
  type: String
  default: 'NO.'
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    index-text="序号"
  />
  ```

- **cellWrap:** 表格主体单元格字符换行
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    cell-wrap
  />
  ```

- **headWrap:** 表格头部单元格字符换行
  type: Boolean
  default: false
  示例
  ```vue
  <sy-table
    :data="tableData"
    :setting="tableSetting"
    head-wrap
  />
  ```
#### 事件触发
- **row-click:** 行点击
  参数: row 当前行数据
  示例
  ```vue
  <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 勾选的列表
  示例
  ```vue
  <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 全选状态
  示例
  ```vue
  <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样式名为当前组件根样式类名
- 表头
  ```scss
  .component-root-class ::v-deep .div-table .div-table-head .item .col {
    height: 80px;
    font-size: 12px;
    ...
  }
  ```
- 表格主体单元格
  ```scss
  .component-root-class ::v-deep .div-table .div-table-body .item .col {
    height: 80px;
    font-size: 16px;
    ...
  }
  ```
更多样式调整请参看表格样式源码