vue+element 表单相关项目问题（三）——数据传递的字符串类型

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

1. 关于表格的新增删除的问题

1.1表格点击新增，增加一行

需求是这样的：

我们可以在表单el-form里面加入 ref="config" 这里的config需要双向绑定，因为默认三行，所以数据写三次 然后遍历config里的数组list，在el-form-item里面加入:prop="'list.' + index + '.start'"，其中list是数组list,index是遍历数组的下标，start是数组list里的字段。 在另一个输入框里加入类似的字段:prop="'list.' + index + '.end'"增加的时候定义一个方法，这里是addItem()，方法代码如下：

        addItem(item, index) {
              this.config.list.push({
                start: "",
                end: "",
                percent: "",
              });
            },

因为这里的需求是最多五行数据，且最后一行的中间值禁用，我们可以利用数组的长度来实现，当下标加一等于数组的长度，也就相当于是最后一行时，并且让数组的长度小于5，代码如下：

   <el-button
                  v-if=" index + 1 == config.list.length && config.list.length < 5"      
                  @click="addItem()"
                  type="primary"
                  >增加</el-button
                >

禁用中间那个输入框可以在那个输入框位置放上 :disabled="index + 1 == config.list.length"，完美解决最后一行中间的输入框禁用问题。

1.2表格点击删除，删除一行

这个很好实现，定义一个删除事件，为了让自由在最后一行才显示删除，且第一行没有删除，我们可以让下标index不等于0并且下标等于数组长度－1，代码如下：

              <el-button
                  v-if="index !== 0 && index == config.list.length - 1"
                  @click="deleteItem(item, index)"
                  type="danger"
                  >删除</el-button

删除事件：

           deleteItem(item, index) {
              this.config.list.splice(index, 1);
            },

1.3效果

2.关于数据传递的字符串类型的问题

2.1 json转对象

前端渲染数据有时需要将json转成对象渲染到页面，传给后端的时候需要将这个对象转换成json，对于新手来说确实比较棘手。 从后台获取的JSon数据，他的形式是这样的config{字段，字段，list[{字段}，{字段}]}。我们可以通过遍历每行数据的config,用JSON.parse()将其转为对象。代码如下：

     this.tableData = res.data;
        // 将json格式转为对象
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].config = JSON.parse(this.tableData[i].config);
        }

2.2数据渲染

当我们拿到转成的对象时，因为里面有数组，渲染页面时我们可以使用插槽。 先用v-for遍历，具体代码如下:

            <span v-for="(item, index) in scope.row.config.list" :key="index">
                {{ item.start }}%≤完成率＜{{ item.end }}% <br/>
              </span>

2.3新增数据传给后端

首先让红框里的字段整合到一体，也就是config里面，然后再讲config对象转成json，最后在把多出的list删掉。 代码如下:

  this.edit.model.config = {
            commissionRate: this.edit.model.commissionRate,
            rate: this.edit.model.rate,
            list: this.edit.model.list,
          };
          this.edit.model.config = JSON.stringify(this.edit.model.config);
          delete this.edit.model.list;

如果只有数组，没有其他的字段，可以这样写:

     this.edit.model["list"] = "";
          this.edit.model.list = [
        JSON.stringify(Object.assign(this.edit.model.list)),
          ];
          delete this.edit.model.list;

效果如下：