让表格更强大：基于 element-ui table 的二次封装

前端

2024-02-17 15:47:53

前言

在前端开发中，表格组件是必不可少的存在。它可以帮助我们以清晰、直观的方式展示数据，方便用户查看和操作。Element-ui table 是一个优秀的表格组件，它提供了丰富的功能和易用的 API，受到了广大开发者的青睐。

然而，在实际开发中，我们有时需要实现一些特殊的功能，而 element-ui table 自身并不能满足我们的需求。这时，我们就需要对 element-ui table 进行二次封装，以扩展其功能。

基于 element-ui table 的二次封装

自定义单元格

Element-ui table 提供了默认的单元格渲染器，但有时我们需要自定义单元格的渲染方式，以满足特殊的需求。例如，我们需要在单元格中显示图片、按钮或其他复杂的元素。

我们可以通过重写单元格渲染器来实现自定义单元格。具体方法是，在表格的 columns 选项中，为要自定义的列指定一个自定义渲染器函数。例如：

{
  prop: 'avatar',
  label: '头像',
  width: '100px',
  render: (h, params) => {
    return h('img', {
      src: params.row.avatar,
      style: 'width: 50px; height: 50px;'
    })
  }
}

动态列

Element-ui table 提供了动态列的功能，允许我们在运行时动态添加或删除列。这对于需要根据不同条件显示不同列的场景非常有用。

我们可以通过使用表格的 dynamic-columns 选项来实现动态列。具体方法是，在 dynamic-columns 选项中，指定一个函数，该函数返回一个列的数组。例如：

dynamic-columns: () => {
  const columns = [
    {
      prop: 'name',
      label: '姓名'
    },
    {
      prop: 'age',
      label: '年龄'
    }
  ]

  if (this.showAddress) {
    columns.push({
      prop: 'address',
      label: '地址'
    })
  }

  return columns
}