如何简单实现一个类似element-ui的table组件？

Z时代
2024-01-10
分类：技术分享

<wxTable :tableData="[{title:'石锤',file:'石锤.pdf'}]">
<wx-column  label="部件名称" prop="title"></wx-column>
<wx-column  label="文件名称" prop="file"></wx-column></wxTable>

想用这个组件渲染出这样的表格(要求 tableData 可扩展)

请教各位大佬给个思路

主要是内部的 wx-column 没思路

回答

其实你要做的事很简单，就是把你那一串html组织成能方便渲染的二维数组而已。

实现的方法可多了，我提供一个简单的方案，可以通过把column直接提交给table来进行数据集中处理后渲染表格

WxColumn.vue

<template>
  <span/>
</template>
<script>
  export default {
    name: 'WxColumn',
    props: {
      label: String,
      prop: String,
    },
    beforeCreate() {
      this.$parent.columns.push(this);
    },
    beforeDestroy() {
      const index = this.$parent.columns.indexOf(this);
      if (index > -1) {
        this.$parent.columns.splice(index, 1);
      }
    },
  };</script>

WxTable.vue

<template>
  <table>
    <tr>
      <th
        v-for="(column, index) in columns"
        :key="`th-${column.label}${column.prop}${index}`"
      >
        {{ column.label }}
      </th>
    </tr>
    <tr
      v-for="(cols, $index) in rows"
      :key="`tr-${$index}`"
    >
      <td
        v-for="col in cols"
        :key="`td-${col.label}${col.prop}${$index}${col.value}`"
      >
        {{ col.value }}
      </td>
    </tr>
    <slot/>
  </table>
</template>
<script>
  export default {
    name: 'WxTable ',
    props: {
      tableData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        columns: [],
      };
    },
    computed: {
      rows() {
        return this.tableData.map(item =>
          this.columns.map(column => ({...column, value: item[column.prop]})),
        );
      },
    },
  };</script>