09 - Vue3 UI Framework - Table 组件
接下来做个自定义的表格组件，即
table组件返回阅读列表点击
需求分析
开始之前我们先做一个简单的需求分析
- 基于原生
table标签的强语义 - 允许用户自定义表头、表体
- 可选是否具有边框
那么可以整理出以下参数表格
| 参数 | 含义 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| heads | 表头 | Array | 数组，每一项包含两个 string 字段：name、identifier | 必填 |
| datas | 表数据 | Array | 数组，每一项包含与 heads 相同数量的 string 字段 | 必填 |
| bordered | 是否有边框 | boolean | false / true | false |
骨架
容易得到如下骨架
实际上我们这里是根据 theme 值判断，然后去渲染原生的 input 或者 textarea 组件，所以可以很容易得到骨架，代码如下：
功能
首先，我们再 Typescript 中声明一些需求分析中的属性：
declare const props: {
bordered: boolean;
};
然后，再在 export default 中写入声明的参数：
export default {
install: function (Vue) {
Vue.component(this.name, this);
},
name: "JeremyTable",
props: {
bordered: {
type: Boolean,
default: false,
},
},
};
样式表
补全层叠样式表
注意，当设置属性
bordered的时候，因为它不是DOM元素本有的属性，所以无论什么情况都会被添加，只不过值可能是false，但是disabled属性就没有这个问题，它为false值时不会绑定到DOM元素上，所以，此处属性选择器要写[bordered="true"]
测试
创建一个测试页，导入 JeremyTable 组件，看一下效果：
项目地址 ??
GitHub: https://github.com/JeremyWu917/jeremy-ui
官网地址 ??
JeremyUI: https://ui.jeremywu.top
感谢阅读 ?