在公司项目中使用前端框架中table组件时，发现显示数据量一多，table组件就会很卡顿，换了几种前端框架都没能解决这个问题。最后在Navicat软件内显示数据的表格中获取到灵感，自制了一个table组件供自己项目使用。
npm install vue-lin-table
main.js内
import VueLinTable from "vue-lin-table"
Vue.use(VueLinTable);
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| loading | 表格加载中 | Boolean | false |
| height | 表格高度 | Number,String | 600 |
| columns | 表格列的配置描述，具体项见后文 | Array | [] |
| data | 显示的结构化数据 | Array | [] |
| headerHeight | 表格头部高度 | Number, String | 40 |
| bodyRowHeight | 表格行高 68C5 | Number, String | 30 |
| wheelHeight | 滚动条高度(预防不同浏览器) | Number | 18 |
| minWidth | 列最小宽度 | Number | 50 |
| isColDrag | 列是否拖动 | Boolean | false |
| tableAlign | 表格全部列位置 | String | - |
| 事件名 | 说明 | 返回值 |
|---|---|---|
| table-change | 多选模式下,点击多选框时触发 | selection：已选项数据 |
| table-scroll | 表格滚动时触发 | event |
| table-row-click | 表格行点击触发 | 返回点击行数据 |
| table-sort | 字段排序点击返回 | 返回对应排序 |
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 列类型，可选值为 selection | String | - |
| title | 列头显示文字 | String | - |
| key | 对应列内容的字段名 | String | - |
| width | 列宽 | Number | - |
| sortable | 是否排序 | Boolean | false |
| tooltip | 是否使用气泡弹窗 | Boolean | false |
| align | 对齐方式，可选值为 left 左对齐、right 右对齐和 center 居中对齐 | String | left |
| fixed | 列是否固定在左侧或者右侧，可选值为 left 左侧和 right 右侧 | String | left |
| render | 自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引。 | Function | - |