庖丁解牛：Vue3 Element-Plus配置JSON快速生成Table列表组件

前端

2024-01-09 22:50:01

前言

在PC端日常的使用中，使用最多的过于表单和列表了，故此对table列表和form表单进行了统一的封装，通过json配置就可以快速适配table列表和form表单。

准备工作

在开始之前，您需要确保已经安装了以下软件：

Node.js
Vue CLI
Element-Plus

创建Vue项目

首先，创建一个新的Vue项目：

vue create table-json

安装Element-Plus

接下来，安装Element-Plus：

npm install element-plus

创建Table组件

现在，我们可以开始创建Table组件了。在src目录下创建一个名为Table.vue的文件，并添加以下代码：

<template>
  <el-table :data="data" :columns="columns" :height="height" :border="border" :stripe="stripe" :summary-method="summaryMethod">
    <template #empty>
      暂无数据
    </template>
  </el-table>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-plus'

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    height: {
      type: Number,
      default: 400
    },
    border: {
      type: Boolean,
      default: true
    },
    stripe: {
      type: Boolean,
      default: true
    },
    summaryMethod: {
      type: Function,
      default: null
    }
  }
}
</script>

使用Table组件

现在，您可以在任何Vue组件中使用Table组件了。例如，您可以在App.vue文件中添加以下代码：

<template>
  <Table :data="data" :columns="columns" />
</template>

<script>
import Table from './components/Table.vue'

export default {
  components: {
    Table
  },
  data() {
    return {
      data: [
        {
          name: 'John Doe',
          age: 30,
          address: '123 Main Street'
        },
        {
          name: 'Jane Doe',
          age: 25,
          address: '456 Elm Street'
        }
      ],
      columns: [
        {
          prop: 'name',
          label: 'Name'
        },
        {
          prop: 'age',
          label: 'Age'
        },
        {
          prop: 'address',
          label: 'Address'
        }
      ]
    }
  }
}
</script>

使用JSON配置生成Table组件

现在，您可以使用JSON配置快速生成Table组件了。例如，您可以在src目录下创建一个名为table.json的文件，并添加以下代码：

{
  "data": [
    {
      "name": "John Doe",
      "age": 30,
      "address": "123 Main Street"
    },
    {
      "name": "Jane Doe",
      "age": 25,
      "address": "456 Elm Street"
    }
  ],
  "columns": [
    {
      "prop": "name",
      "label": "Name"
    },
    {
      "prop": "age",
      "label": "Age"
    },
    {
      "prop": "address",
      "label": "Address"
    }
  ],
  "height": 400,
  "border": true,
  "stripe": true,
  "summaryMethod": null
}

然后，您可以在Vue组件中使用以下代码生成Table组件：

<template>
  <Table :config="config" />
</template>

<script>
import Table from './components/Table.vue'
import tableConfig from './table.json'

export default {
  components: {
    Table
  },
  data() {
    return {
      config: tableConfig
    }
  }
}
</script>