其他分享
首页 > 其他分享> > 09 - Vue3 UI Framework - Table 组件

09 - Vue3 UI Framework - Table 组件

作者：互联网

接下来做个自定义的表格组件，即 table 组件

返回阅读列表点击 这里

需求分析

开始之前我们先做一个简单的需求分析

  1. 基于原生 table 标签的强语义
  2. 允许用户自定义表头、表体
  3. 可选是否具有边框

那么可以整理出以下参数表格

参数 含义 类型 可选值 默认值
heads 表头 Array 数组，每一项包含两个 string 字段：name、identifier 必填
datas 表数据 Array 数组，每一项包含与 heads 相同数量的 string 字段 必填
bordered 是否有边框 boolean false / true false

骨架

容易得到如下骨架

实际上我们这里是根据 theme 值判断，然后去渲染原生的 input 或者 textarea 组件，所以可以很容易得到骨架，代码如下：

<template>
    <table class="jeremy-table" :bordered="bordered">
        <slot></slot>
    </table>
</template>

功能

首先，我们再 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,
    },
  },
};

样式表

补全层叠样式表

<style lang="scss">
.jeremy-table {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  th,
  td {
    padding: 12px;
  }
  tbody {
    > tr {
      transition: background-color 250ms;
      &:nth-child(even) {
        background: rgb(247, 247, 247);
      }
      &:hover {
        background: #d3c8f5;
      }
    }
  }
}
.jeremy-table[bordered="true"] {
  border: 1px solid rgb(235, 235, 235);
  tr,
  th,
  td {
    border: 1px solid rgb(235, 235, 235);
  }
}
</style>

注意，当设置属性 bordered 的时候，因为它不是 DOM 元素本有的属性，所以无论什么情况都会被添加，只不过值可能是 false ，但是 disabled 属性就没有这个问题，它为 false 值时不会绑定到 DOM 元素上，所以，此处属性选择器要写 [bordered="true"]

测试

创建一个测试页，导入 JeremyTable 组件，看一下效果：

table

项目地址

标签：false,09,bordered,Framework,UI,table,组件,235,属性
来源： https://www.cnblogs.com/jeremywucnblog/p/15701031.html