关于elementUI如何在表格循环列表里分别新增Tag的设计使用

话不多说，直接上代码。想要实现的目的是这样的，想要在表格里单独添加每一个tag

那么，需要解决的问题就是如何定义这每一个插槽里的输入框，把每个输入框以及里面插入的数据区分开。

研究了很久，最后选择了对象数组。下面上代码

<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>招标管理</el-breadcrumb-item>
      <el-breadcrumb-item>一键评标</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 添加角色按钮 -->
      <el-row>
        <el-col
          ><el-button type="primary" @click="addDialogVisible = true"
            >添加资质</el-button
          ></el-col
        >
      </el-row>
      <!-- 角色列表区域 -->
      <el-table :data="roleList" style="width: 100%" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="资质名称" prop="certiName"></el-table-column>
        <el-table-column label="等级" prop="level">
          <template slot-scope="scope">
            <el-tag
              v-for="item in scope.row.levels"
              :key="item.certiLevelId"
              closable
              :disable-transitions="false"
              @close="handleClose(item)"
            >
              {{ item.certiLevelName }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputParams[scope.$index].visible"
              v-model="inputParams[scope.$index].value"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm(scope.$index)"
              @blur="handleInputConfirm(scope.$index)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(scope.$index)"
              >添加资质</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-setting"
              @click="showEditDialog(scope.row.bidId)"
              >编辑名称</el-button
            >
            <el-button size="mini" type="danger" icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加角色列表对话框 -->
    <el-dialog
      title="添加项目"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addRoleDialogClosed"
    >
      <el-form
        ref="addRoleFormRef"
        :model="addRoleForm"
        :rules="addRoleFormRoles"
        width="50%"
      >
        <el-form-item label="资质名称" prop="bidName">
          <el-input v-model="addRoleForm.bidName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改资质的对话框 -->
    <el-dialog
      title="修改资质名称"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogclosed"
    >
      <el-form
        ref="editFormRef"
        :model="editForm"
        :rules="editFormRoles"
        width="50%"
      >
        <el-form-item label="资质名称" prop="bidName">
          <el-input v-model="editRoleForm.bidName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改等级的对话框 -->
    <el-dialog
      title="修改资质等级"
      :visible.sync="levelDialogVisible"
      width="50%"
      @close="levelDialogclosed"
    >
      <span slot="footer" class="dialog-footer">
        <el-button @click="levelDialogVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      levelDialogVisible: false,
      editDialogVisible: false,
      addDialogVisible: false,
      total: 1,
      queryInfo: {
        currentPage: 1,
        pageSize: 10
      },
      inputVisible: {},
      editData: {},
      // 所有权限数据
      scoreList: [],
      roleList: [
        {
          certiName: '资质名称',
          levels: [
            {
              certiLevelId: 1,
              certiLevelName: '111'
            }
          ]
        },
        {
          certiName: '资质名称1',
          levels: [
            {
              certiLevelId: 1,
              certiLevelName: '111'
            }
          ]
        }
      ],
      roleForm: {},
      bidId: '',
      addRoleForm: {
        bidName: '',
        crtUserId: 1
        // roleDesc: ''
      },
      editRoleForm: {
        bidName: '',
        crtUserId: 1
      },
      levelRoleForm: {
        bidName: '',
        crtUserId: 1
      },
      editForm: {},
      levelForm: {},
      addRoleFormRoles: {
        bidName: [
          // 验证项目名称是否合法
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ]
        // roleDesc: [
        //   // 验证创建人是否合法
        //   { required: true, message: '请输入创建人', trigger: 'blur' }
        // ]
      },
      editFormRoles: {
        bidName: [
          // 验证项目名称是否合法
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ]
      },
      levelFormRoles: {
        bidName: [
          // 验证项目名称是否合法
          { required: true, message: '请输入项目等级', trigger: 'blur' }
        ]
      },
      // input
      inputParams: [
        {
          value: '',
          visible: false
        },
        {
          value: '',
          visible: false
        }
      ]
    }
  },
  created() {
    // this.getRoleList()
  },
  methods: {
    handleClose(item) {
      // item.certiLevelName.splice(
      //   item.certiLevelName.indexOf(item.index),
      //   1
      // )
    },
    showInput(index) {
      this.inputParams[index].visible = true
      // console.log(
      //   'this.inputVisible',
      //   this.inputVisible['visible' + row.index],
      //   row.index
      // )
      // this.inputVisible = true
      // this.$nextTick(_ => {
      //   // this.$refs.saveTagInput.$refs.input.focus()
      //   this.$refs.saveTagInput.focus()
      // })
    },
    handleInputConfirm(index) {
      console.log(this.inputParams[index].value)
      this.roleList[index].levels.push({
        certiLevelId: Date.parse(new Date()) + '',
        certiLevelName: this.inputParams[index].value
      })
      this.inputParams[index].value = ''
      this.inputParams[index].visible = false
      // console.log('hhh', this.editData['input' + row.index])
      // let inputValue = this.editData['input' + row.index]
      // if (inputValue) {
      //   row.levels.push(inputValue)
      // }
      // this.editData['input' + row.index] = ''
      // this.inputVisible['visible' + row.index] = false
    },
    showLevelDialog() {
      this.levelDialogVisible = true
    },
    editDialogclosed() {
      this.$refs.editFormRef.resetFields()
    },
    addRoleDialogClosed() {
      this.$refs.addRoleFormRef.resetFields()
    },
    levelDialogclosed() {
      this.$refs.levelFormRef.resetFields()
    },
    async showEditDialog(bidId) {
      // const { data: res } = await this.$http.get(`users/${id}`)
      // // const { data: res } = await this.$http.get('users/' + id)
      // if (res.meta.status !== 200) {
      //   return this.$message.error('查询用户资料失败')
      // }
      // console.log(res.data)
      // this.editForm = res.data
      this.editDialogVisible = true
    },
    addRole() {
      this.$refs.addRoleFormRef.validate(async valid => {
        if (!valid) return
        const res = await this.$http.post('/bid', this.addRoleForm)
        console.log('增加', res)
        // 隐藏对话框
        this.addDialogVisible = false
        // 刷新列表
        this.getRoleList()
      })
    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pageSize = newSize
      this.getRoleList()
    },
    // 监听当前页改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.getUserList()
    },
    goBack() {
      this.$router.go(-1)
    },
    // 查询
    async getRoleList() {
      const { data: res } = await this.$http.get('/certi', {
        params: this.queryInfo
      })
      if (res.code !== 200) {
        return this.$message.console.error('查询资质失败')
      }
      console.log('查询资质', res)
      this.roleList = res.data.records
      this.roleList.forEach((item, index) => {
        item.index = index
        console.log('item.index,', item.index)
        this.editData['input' + item.index] = ''
        this.inputVisible['visible' + item.index] = false
      })
      this.total = res.data.total
      console.log(this.roleList)
    }
  }
}
</script>
<style lang="scss" scoped>
.el-tag {
  margin: 7px;
}
.bd_top {
  border-top: 1px solid #eee;
}
.bd_buttom {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
// .distributeDialog {
//   // height: 700px;
// }
</style>