2021-04-29

weixin_46031196

于 2021-04-29 21:39:42 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/weixin_46031196/article/details/116277428

版权

这篇博客探讨了如何在Vue.js应用中通过异步API获取和管理表格数据。内容涉及`categoriesxuanr()`、`categoriesctianj()`和`categoriesbianji()`等方法，用于获取、添加和编辑表格中的分类详细参数。表格展示参数名称，并提供编辑和删除功能，允许用户通过输入框新增标签并实时更新数据。此外，还展示了关闭输入框和处理输入确认的事件处理函数。

摘要由CSDN通过智能技术生成

从接口中获取数据

//表格数据
    async categoriesxuanr() {
      let id = this.modeab[this.modeab.length - 1];
      let params = this.activeName;
      const res = await categoriesxuanr(id, { sel: params });
      res.forEach((item) => {
        item.inputVisible = false;
        item.inputValue = "";
        item.attr_vals = item.attr_vals.split(/[,' ' | _ - /]+/);
      });
      this.tableData = res;
    },
    //添加数据
    async categoriesctianj() {
      let id = this.modeab[this.modeab.length - 1];
      let params = this.activeName;
      if (params == "many") {
        const res = await categoriesctianj(id, {
          attr_sel: params,
          attr_name: this.dtform.tjname,
        });
        console.log(res);
        this.dialogVisible = false;
        this.categoriesxuanr();
      } else {
        const res = await categoriesctianj(id, {
          attr_sel: params,
          attr_name: this.jtform.tjname,
        });
        console.log(res);
        this.dialogVisi = false;
        this.categoriesxuanr();
      }
    },
    // 添加分类详细参数
    async categoriesbianji() {
      let id = this.modeab[this.modeab.length - 1];
      let params = this.activeName;
      const res = await categoriesbianji(id, this.attrid, {
        attr_name: this.attrname,
        attr_sel: params,
        attr_vals: this.attrvals.join(","),
      });
      console.log(res);
      this.categoriesxuanr();
      this.jtbianjfrom = {};
      this.showfzfjt = false;
    },

在表格中进行渲染

<el-table :data="tableData" style="width: 100%" border>
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <el-tag
                    v-for="(item, inde) in scope.row.attr_vals"
                    :key="inde"
                    closable
                    type=""
                    style="margin: 10px 20px"
                    @close="handleClo(scope.row,scope.row.attr_vals, inde)"
                    v-show="item !== ''"
                  >
                    {{ item }}
                  </el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column label="#" type="index"></el-table-column>
              <el-table-column label="参数名称" prop="attr_name">
              </el-table-column>
              <el-table-column label="操作" prop="">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    class="el-icon-edit"
                    @click="dtxiugai(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    class="el-icon-delete"
                    @click="sanc(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

在表格中添加

1. 首先在表格上写入嵌套
<template slot-scope="scope">
      <el-tag
      v-for="(item, inde) in scope.row.attr_vals"
      :key="inde"
      closable
      type=""
      style="margin: 10px 20px"
      @close="handleClo(scope.row,scope.row.attr_vals, inde)"
      v-show="item !== ''"
      >
      {{ item }}
      </el-tag>
      <el-input
      class="input-new-tag"
       v-if="scope.row.inputVisible"
       v-model="scope.row.inputValue"
       ref="saveTagInput"
       size="small"
       @keyup.enter.native="handleInputConfirm(scope.row)"
       >
       </el-input>
       <el-button
       v-else
       class="button-new-tag"
       size="small"
       @click="showInput(scope.row)"
       >+ New Tag</el-buttonz
       >
</template>

写入事件

 showInput(row) {
      row.inputVisible = true;
    },
    // 添加分类详细参数input框事件
    handleInputConfirm(row) {
      row.attr_vals.push(row.inputValue);
      this.attrvals = row.attr_vals;
      this.attrname = row.attr_name;
      this.attrid = row.attr_id;
      this.categoriesbianji();
      row.inputVisible = false;
      row.inputValue = "";
    },
    // 添加分类详细参数input框事件
    handleInputCon(row) {
      row.attr_vals.push(row.inputValue);
      this.attrvals = row.attr_vals;
      this.attrname = row.attr_name;
      this.attrid = row.attr_id;
      this.categoriesbianji();
      row.inputVisible = false;
      row.inputValue = "";
    },

    // 删除分类详细参数
    handleClo(row1,row, index) {
      row.splice(index, 1);
      this.attrvals = row;
      this.attrname = row1.attr_name;
      this.attrid = row1.attr_id;
      this.categoriesbianji();
    },
    // 删除分类详细参数
    handleClose(row1,row, index) {
       row.splice(index, 1);
      this.attrvals = row;
      this.attrname = row1.attr_name;
      this.attrid = row1.attr_id;
      this.categoriesbianji();
    },