求助 - 二次开发一个高度可定制的表格组件？

发布于
2024-03-30 江西

新手上路，请多包涵

求助 - 二次开发一个高度可定制的表格组件

我希望基于 el-table > el-table-clumn 二次开发一个高度可定制的表格组件，就是在 el-table-clumn 渲染每一列的时候，每一列的内容都是自定义的，可以有文本，可以有其它的表单控件，同时也可以控制单元格是否合并。

无法实现高度可定制化

前端 javascript vue.js

html5 sass

阅读 965

AI BotBETA

在 Vue.js 中，二次开发一个高度可定制的表格组件是一个常见的需求。基于 Element UI 的 el-table 和 el-table-column 组件进行二次开发，可以通过以下几个步骤来实现你的需求：

创建自定义组件：

* 创建一个新的 Vue 组件，例如命名为 `CustomTable`。
* 在这个组件中，使用 `el-table` 作为基础的表格结构。

自定义列内容：

* 在 `CustomTable` 组件中，你可以为每一列定义一个 `slot`，这样用户可以自定义每一列的内容。
* 例如，你可以定义一个名为 `custom-content` 的 `slot`，并在 `el-table-column` 中使用它。

<template>
  <el-table>
    <el-table-column v-for="(column, index) in columns" :key="index">
      <template slot="custom-content" slot-scope="scope">
        <!-- 这里可以放置自定义内容，比如文本、表单控件等 -->
        <component :is="column.component" v-bind="column.props" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    }
  }
}
</script>

单元格合并：

* Element UI 的 `el-table` 提供了 `span-method` 属性，你可以利用这个属性来控制单元格的合并。
* 在 `CustomTable` 组件中，你可以定义一个方法，该方法根据传入的参数（行、列、当前行号、当前列号）来确定是否合并单元格。

<template>
  <!-- ... -->
  <el-table :span-method="spanMethod">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  // ...
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      // 根据你的逻辑判断是否需要合并单元格
      // 返回一个包含两个元素的数组，第一个元素表示要合并的行数，第二个元素表示要合并的列数
      // 例如：[2, 1] 表示合并两行一列
    }
  }
}
</script>

使用自定义组件：

* 在父组件中使用 `CustomTable`，并传入所需的列配置。
* 每一列的配置可以是一个对象，包含 `component`（要渲染的组件或标签名）和 `props`（传递给组件的属性）。

这样，你就可以基于 Element UI 的 el-table 和 el-table-column 组件，创建一个高度可定制的表格组件，其中每一列的内容都可以自定义，并且可以控制单元格的合并。

3 个回答

得票最新

along

3k1431

发布于
2024-04-08 安徽

更新于
2024-04-08

用这个表格插件能满足你的需求：[vxe-table]
(https://vxetable.cn/#/table/start/install)

或者你想要的是这种： handsontable

<script setup lang="ts">
  const tableList = ref<any>([])

  // 通用行合并函数（将相同多列数据合并为一行）
  const mergeRowMethod: any = ({ row, _rowIndex, column, visibleData }: any) => {
    const fields = ['name'] //合并相同年龄
    const cellValue = row[column.field]

    if (cellValue && fields.includes(column.field)) {
      const prevRow = visibleData[_rowIndex - 1]
      let nextRow = visibleData[_rowIndex + 1]
      if (prevRow && prevRow[column.field] === cellValue) {
        return { rowspan: 0, colspan: 0 }
      } else {
        let countRowspan = 1
        while (nextRow && nextRow[column.field] === cellValue) {
          nextRow = visibleData[++countRowspan + _rowIndex]
        }
        if (countRowspan > 1) {
          return { rowspan: countRowspan, colspan: 1 }
        }
      }
    }
  }
</script>

 <vxe-table
  border
  :column-config="{ resizable: true }"
  :scroll-y="{ enabled: false }"
  :span-method="mergeRowMethod"
  min-height="40"
  :data="tableList"
  :sort-config="{ multiple: true, chronological: true }"
>
  <vxe-column field="name" title="姓名" sortable width="180">
    <template #default="{ row }">
     //
    </template>
  </vxe-column>

  <vxe-column field="sex" title="年龄" width="180">
    <template #default="{ row }">
     //
    </template>
</vxe-column>
</vxe-table>

陟上晴明

21.5k145091

发布于
2024-04-08 浙江

看情况应该是想要做一个在线的类Excel表格的编辑组件。那么就不是使用 EleUI 来做了，可以找一找其他的开源在线Excel库来使用，比如说： 🔗 univer。

如果不是想要做在线Excel这样的组件。那我得强调一下千万尝试封装这样的一个组件。比如说期望实现一个可客制化的表格组件，想要传入一个JSON数据或者数组数据。按传入的数据来渲染各种各样的单元格内容，一开始可能你花费几天时间可能可以简单实现，但是日积月累会出现越来越多的单元格类型，然后开始写各种的兼容，出现越来越多的 if-else/switch，引入各种的自定义组件在一个所谓的高可定制化的巨大Table组件当中。直接按照业务在不同的业务场景下使用 el-table 来针对性的制作一个符合当前业务场景的表格就好了。