話不多說，直接上代碼。想要實現的目的是這樣的，想要在表格里單獨添加每一個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>