ea-ui

Table 表格 ​

引入 ​

js

js
<script type="module">
  import "./node_modules/easy-component-ui/components/ea-table/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础表格 ​

基础的表格展示用法。

WARNING

注意: 在 VUE 环境下, data 的设置推荐在 table-ready 事件触发时设置，否则可能会导致表格数据不渲染。此后示例同此情况。

同理, 若原生环境出现该问题, 也可使用该方法。

姓名年龄地址
示例代码

html

html
<div>
  <ea-table id="basicTable">
    <ea-table-column prop="name" width="100">姓名</ea-table-column>
    <ea-table-column prop="age" width="100">年龄</ea-table-column>
    <ea-table-column prop="address">地址</ea-table-column>
  </ea-table>
</div>

js

js
const basicTable = document.querySelector("#basicTable");
basicTable.addEventListener("table-ready", (e) => {
  basicTable.data = data;
});

带斑马纹表格 ​

使用带斑马纹的表格，可以更容易区分出不同行的数据。

姓名年龄地址
示例代码

html

html
<div>
  <ea-table id="stripeTable" stripe>
    <ea-table-column prop="name" width="100">姓名</ea-table-column>
    <ea-table-column prop="age" width="100">年龄</ea-table-column>
    <ea-table-column prop="address">地址</ea-table-column>
  </ea-table>
</div>

js

js
const stripeTable = document.querySelector("#stripeTable");
stripeTable.addEventListener("table-ready", (e) => {
  stripeTable.data = data;
});

带边框表格 ​

姓名年龄地址
示例代码

html

html
<div>
  <ea-table id="borderTable" border>
    <ea-table-column prop="name" width="100">姓名</ea-table-column>
    <ea-table-column prop="age" width="100">年龄</ea-table-column>
    <ea-table-column prop="address">地址</ea-table-column>
  </ea-table>
</div>

js

js
const borderTable = document.querySelector("#borderTable");
borderTable.addEventListener("table-ready", (e) => {
  borderTable.data = data;
});

固定表头 ​

纵向内容过多时，可选择固定表头。

日期姓名年龄地址
示例代码

html

html
<div>
  <ea-table id="fixedHeaderTable" border height="250">
    <ea-table-column prop="date" width="100">日期</ea-table-column>
    <ea-table-column prop="name" width="100">姓名</ea-table-column>
    <ea-table-column prop="age" width="100">年龄</ea-table-column>
    <ea-table-column prop="address">地址</ea-table-column>
  </ea-table>
</div>

js

js
const fixedHeaderTable = document.querySelector("#fixedHeaderTable");
fixedHeaderTable.addEventListener("table-ready", (e) => {
  fixedHeaderTable.data = moreData;
});

多级表头 ​

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。

日期姓名年龄地址
示例代码

html

html
<div>
  <ea-table id="groupingHeadTable" border height="250">
    <ea-table-column prop="date" width="100" rowspan="3">日期</ea-table-column>
    <ea-table-column label="详细信息" colspan="3">
      <ea-table-column prop="name" width="100" rowspan="2"
        >姓名</ea-table-column
      >
      <ea-table-column label="个人信息" colspan="2">
        <ea-table-column prop="age" width="100">年龄</ea-table-column>
        <ea-table-column prop="address">地址</ea-table-column>
      </ea-table-column>
    </ea-table-column>
  </ea-table>
</div>

js

js
const groupingHeadTable = document.querySelector("#groupingHeadTable");
groupingHeadTable.addEventListener("table-ready", (e) => {
  groupingHeadTable.data = moreData;
});

单选 ​

选择单行数据时使用色块表示。

日期姓名年龄地址
示例代码

html

html
<div>
  <ea-table id="radioTable" border height="250" highlight-current-row>
    <ea-table-column prop="date" width="100">日期</ea-table-column>
    <ea-table-column prop="name" width="100">姓名</ea-table-column>
    <ea-table-column prop="age" width="100">年龄</ea-table-column>
    <ea-table-column prop="address">地址</ea-table-column>
  </ea-table>
</div>

js

js
const radioTable = {
  table: document.querySelector("#radioTable"),

  init() {
    this.table.addEventListener("table-ready", (e) => {
      this.table.data = moreData;
    });

    this.table.addEventListener("current-change", (e) => {
      console.log(e.detail);
    });
  },
};
radioTable.init();

自增 id 序列 ​

设置 type 属性为 index 即可显示从 1 开始的索引号。。

id姓名年龄地址
示例代码

html

html
<ea-table id="increaseliyTable" border height="250" highlight-current-row>
  <ea-table-column type="index" width="100">id</ea-table-column>
  <ea-table-column prop="name" width="100">姓名</ea-table-column>
  <ea-table-column prop="age" width="100">年龄</ea-table-column>
  <ea-table-column prop="address">地址</ea-table-column>
</ea-table>

js

js
const increaseliyTable = document.querySelector("#increaseliyTable");
increaseliyTable.addEventListener("table-ready", (e) => {
  increaseliyTable.data = data;
});

多选 ​

选择多行数据时使用 Checkbox。

id姓名年龄地址
示例代码

html

html
<ea-table id="checkboxTable" border height="250">
  <ea-table-column type="selection" width="100"></ea-table-column>
  <ea-table-column type="index" width="100">id</ea-table-column>
  <ea-table-column prop="name" width="100">姓名</ea-table-column>
  <ea-table-column prop="age" width="100">年龄</ea-table-column>
  <ea-table-column prop="address">地址</ea-table-column>
</ea-table>

js

js
const checkboxTable = document.querySelector("#checkboxTable");
checkboxTable.addEventListener("table-ready", (e) => {
  checkboxTable.data = data;
});
checkboxTable.addEventListener("body-selection-change", (e) => {
  console.log(e.detail);
});

排序 ​

对表格进行排序，可快速查找或对比数据。

日期姓名年龄地址
示例代码

html

html
<ea-table id="sortableTable" border height="250">
  <ea-table-column prop="date" width="100" rowspan="3" sortable
    >日期</ea-table-column
  >
  <ea-table-column label="详细信息" colspan="3">
    <ea-table-column prop="name" width="100" rowspan="2" sortable
      >姓名</ea-table-column
    >
    <ea-table-column label="个人信息" colspan="2">
      <ea-table-column prop="age" width="100">年龄</ea-table-column>
      <ea-table-column prop="address">地址</ea-table-column>
    </ea-table-column>
  </ea-table-column>
</ea-table>

js

js
const sortableTable = {
  table: document.querySelector("#sortableTable"),

  init() {
    this.table.addEventListener("table-ready", (e) => {
      this.table.data = moreData;
    });

    this.table.addEventListener("sort-change", (e) => {
      console.log(e.detail);
    });
  },
};
sortableTable.init();

自定义插槽 ​

自定义某列或表头的显示内容，可组合其他组件使用。

DANGER

注意: 若 slot="body" 中的元素要带有业务逻辑且开启了排序功能，则该元素必须以 WebComponent 的形式存在，且事件需要在组件中已经定义和绑定。否则会在排序后丢失元素事件。

日期姓名年龄地址
示例代码

html

html
<div class="demo">
  <ea-table id="customTable" border height="250">
    <ea-table-column prop="date" width="100" rowspan="3" sortable
      >日期</ea-table-column
    >
    <ea-table-column label="详细信息" colspan="3">
      <ea-table-column prop="name" width="100" rowspan="2" sortable
        >姓名</ea-table-column
      >
      <ea-table-column label="个人信息" colspan="2">
        <ea-table-column prop="age" width="100">年龄</ea-table-column>
        <ea-table-column prop="address">地址</ea-table-column>
      </ea-table-column>
    </ea-table-column>
    <div slot="header">
      <ea-input id="searchInput" placeholder="搜索名字"></ea-input>
    </div>
    <div slot="body">
      <div style="display: flex; justify-content: space-evenly;">
        <my-edit-button></my-edit-button>
        <my-delete-button></my-delete-button>
      </div>
    </div>
    <div slot="empty">
      <ea-empty description="描述文字" image-size="100"></ea-empty>
    </div>
  </ea-table>
</div>

js

NOTE

示例中的自定义组件，其中的逻辑使用了异步操作，因为其本身调用的是 Table 组件上的事件，所以需要等待 Table 组件自身的事件触发完成。

js
const customTable = {
  table: document.querySelector("#customTable"),
  searchInput: document.querySelector("#searchInput"),

  init() {
    this.table.addEventListener("table-ready", (e) => {
      console.log(this.table.data, e);
      console.log(this.table.data);
      this.table.data = moreData;
    });

    // 搜索
    this.searchInput.addEventListener("change", () => {
      const res = moreData.filter((item) =>
        item.name.includes(this.searchInput.value)
      );
      this.table.data = res;
    });
  },
};
customTable.init();

// 编辑按钮
class MyEditButton extends HTMLElement {
  constructor() {
    super();

    const shadowroot = this.attachShadow({ mode: "open" });
    shadowroot.innerHTML = `
              <ea-button type="primary" size="mini">编辑</ea-button>
          `;
    const btn = shadowroot.querySelector("ea-button");
    btn.addEventListener("click", (e) => {
      setTimeout(() => {
        console.log(customTable.table.currentRowDetail);
      }, 0);
    });

    shadowroot.appendChild(btn);
  }
}
if (!window.customElements.get("ea-my-edit-button"))
  window.customElements.define("ea-my-edit-button", MyEditButton);

// 删除按钮
class MyDeleteButton extends HTMLElement {
  constructor() {
    super();

    const shadowroot = this.attachShadow({ mode: "open" });
    shadowroot.innerHTML = `
              <ea-button type="danger" size="mini">删除</ea-button>
          `;
    const btn = shadowroot.querySelector("ea-button");
    btn.addEventListener("click", (e) => {
      setTimeout(() => {
        console.log(customTable.table.currentRowDetail);
      }, 0);
    });
  }
}
if (!window.customElements.get("ea-my-delete-button"))
  window.customElements.define("ea-my-delete-button", MyDeleteButton);

Table Attributes ​

参数说明类型可选值默认值
data数据--[]
height高度---
border边框--false
stripe斑马纹--false
highlight-current-row当前行高亮--false
currentRow当前行---
currentRowDetail当前行详情---

Table CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
header-wrap表格的thead容器(内部为一个 table 元素, 仅含 colgroup 和 thead)
header-table表头表格
body-wrap表格的tbody容器(内部为一个table元素, 仅含colgroup, tbody 和 slot [name="empty"])
row表格行
th-cell表头单元格
td-cell表格单元格

TableColumn CSS Part ​

名称说明
container外层容器

Table Events ​

事件名说明参数
sort-change排序-
current-change当前行变化-
click点击行-
body-selection-changetype=selection时, 选中行变化-

Table Slot ​

名称说明
-表头内容, 仅支持 ea-table-column
header表头额外内容
body表格主体额外列
empty空数据

Table-column Attributes ​

参数说明类型可选值默认值
prop表头对应的数据的键值---
labelth 的内容---
width列宽--100
sortable排序--false
type类型Stringdefault/index/selectiondefault
rowspan跨行数Number-1
colspan跨列数Number-1
order排序顺序Stringasc/descasc

Table-column Slot ​

名称说明
-th 内容