基础表格
首先开发table组件之前，先想好要用什么样式的api，因为笔者在生产工作中用的都是element，所以前面几个组件风格和element类似，但是这次不打算用element的风格了，打算换一种，直接展示：
我们期望用户这样使用：
依照这个写出以下代码
{{col.title}}
{{row[col.key]}}
最后出来的效果就是：
然后实现了这个后我们开始做后面的，先从固定表头开始。
立即学习“前端免费学习笔记（深入）”；
固定表头
这里先采用第一种，以后不能满足需求了再改成后面的方法。
效果和代码如下：
ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件
高度/流体高度
可以为 Table 设置一个高度。(height)
当数据量动态变化时，可以为 Table 设置一个最大高度。(maxHeight) 通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
只要在sanorin-table元素中定义了height或者maxHeight属性，即可实现固定表头的表格，而不需要额外的代码。
代码如下：
自定义列宽
接下来加入宽度控制，希望在columns 传入的数组对象内加入宽度，示例如下:
const columnsList = [
{
title: '书名',
key: 'name',
width: 100,
},
{
title: '作者',
key: 'author',
width: 100,
},
{
title: '价格',
key: 'price',
width: 100,
},
{
title: '简介',
key: 'desc',
minWidth: 350,
}
]希望达到以下效果
1、含有width的列，宽度固定，不随浏览器宽度变化而变化
2、含有minWidth的列，在大于设定值时，自动填充 table 剩余宽度，小于设定值时，固定该宽度
3、不包含width和minWidth的列，自动填充 table 剩余宽度
根据我们的需求，我们需要单独控制每一列的宽度展示，并在浏览器宽度变化时实时的重新计算并且重新渲染列。
首先定义出一个方法，用来计算每一列在当前情况下所要的宽度，再绑定要dom上。然后，每次表格变化/浏览器宽度变化时候就能实时响应改变Table的宽度了。
const initColumns = () => {
// 计算每一列在当前情况下所要的宽度
}
watch(() => props.columns, () => { initColumns() });
onMounted(() => {
nextTick(() => {
initColumns();
on(window, 'resize', throttle(() => initColumns(), 400));
});
});
onBeforeUnmount(() => off(window, 'resize', () => initColumns()));全部代码：
其中用到的两个js，防抖节流和注册监听这里也放下吧
/* 防抖节流函数 */
let timeout = null // 创建一个标记用来存放定时器的返回值
let count = 0;
export function debounce(fn, wait = 1000, immediate = false) {
return function () {
const args = arguments;
if (immediate) {
if (count == 0) {
fn.apply(this, arguments)
count++;
} else {
if (timeout) {
clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉
}
timeout = setTimeout(() => {
fn.apply(this, arguments)
}, wait)
}
} else {
if (timeout) {
clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉
}
timeout = setTimeout(() => {
fn.apply(this, arguments)
}, wait)
}
}()
}
let canRun = true;
let count1 = 0;
export function throttle(fn, wait = 1000, immediate = true) {
return function () {
if (immediate) {
if (count1 == 0) {
fn.apply(this, arguments);
count1++;
} else {
if (canRun) {
canRun = false
setTimeout(function () {
fn.apply(this, arguments)
canRun = true
}, wait);
}
}
} else {
if (!canRun) return
canRun = false
setTimeout(function () {
fn.apply(this, arguments)
canRun = true
}, wait);
}
}()
}/**
* 绑定事件 on(element, event, handler)
*/
export const on = (element, event, handler) => {
if (document.addEventListener) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
}
/**
* 解绑事件 off(element, event, handler)
*/
export const off = (element, event, handler) => {
if (document.removeEventListener) {
if (element && event) {
element.removeEventListener(event, handler, false)
}
}
} 
