Vue2 Element 表格&表单 我惯用的写法

---

前言

我需要整理一下表单验证和表格, 我们的项目里大量的使用了它们, 我应该形成一个模式去套用而不是像现在这样边构思边写.

---

一、表格

还好后端返回的数据通常规范好用, 不是一些奇形怪状的结构.

1.表头生成

表头创建, 最少需要知道表头要写的字(label)和该表头下该列出何种数据, 大部分时候这两者不能够相同, 所以我觉得如果需要使用v-for去创建表头的话, 应当创建包含多个"label值和prop值构成的对象"的数组, 就像这样:

<el-table-column
  :label="item.labels"
  :prop="item.props"
  v-for="(item, index) in tableHead"
  :key="index"
>
</el-table-column>

tableHead: [
  {
    labels: "tableEvent1", props: "column1" },
  {
    labels: "tableEvent2", props: "column2" },
  {
    labels: "tableEvent3", props: "column3" },
],

完成表头创建后, 数据会根据表头绑定的prop属性将数据源对象中匹配的属性的值在该列下渲染出来, 比如prop绑定了"data1", 那么渲染数据源中每一条记录的"data1"属性值到该列.
所以表格一定得绑定一个数据源,
做的时候, prop可能会是遍历出来的, 保证prop和数据源中的属性值匹配即可.

---

2.数据源和表头数组分离

然后数据源需要从后端请求, 如果数据源和表头放在一个结构里, 也不是不可以, 但是数据请求过来之后要在前端进行大量赋值操作和额外的数据结构处理操作, 我并不喜欢这样.

所以数据源单独开一个变量, 后端返回的数据一般会是这种格式:

dataOri: [
  {
   
    column1: "11",
    column2: "12",
    column3: "13",
    column4: "14",
    column5: "15",
  },
  {
   
    column1: "21",
    column2: "22",