<el-button
@click="addRow()"
type="success"
icon="el-icon-plus"
style="margin-bottom:10px;"
size="mini"
>添加勾选项</el-button>
<el-table :data="tableData" style="width: 100%" border size="small">
<el-table-column label="名称">
<template slot-scope="scope">
<span v-if="scope.row.statusBtn===false">{{scope.row.name}}</span>
<el-input size="mini" v-else-if="scope.row.statusBtn===true" v-model="tableName"></el-input>
</template>
</el-table-column>
<el-table-column label="分数">
<template slot-scope="scope">
<span v-if="scope.row.statusBtn===false">{{scope.row.score}}</span>
<el-input
type="number"
v-else-if="scope.row.statusBtn===true"
size="mini"
v-model="tableScore"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="editCheck(scope.row)"
v-if="scope.row.statusBtn===false"
icon="el-icon-edit"
>编 辑</el-button>
<el-button
type="success"
size="mini"
@click="sureCheck(scope.row)"
v-else-if="scope.row.statusBtn===true"
icon="el-icon-check"
>保 存</el-button>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteFun(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
js部分:
//获得表格数据,增加一个参数statusBtn
if (res.data.success === true) {
let arr = res.data.data
for (let item of arr) {
item['statusBtn'] = false
}
this.tableData = arr
}
// 判断值内容是否全部填写
flagFun () {
const flag = this.tableData.every(item => {
if (item.name !== '' && item.score !== '') {
return true
} else {
return false
}
})
return flag
},
//勾选弹框表格添加一行
addRow () {
if (this.tableData.length === 0) {
this.tableData.push({ name: '', score: '', statusBtn: true })
} else {
for (let i of this.tableData) {
if (i.statusBtn) return this.$message.warning("请先保存当前编辑项");
}
if (this.flagFun()) {
this.tableData.push({ name: '', score: '', statusBtn: true })
} else {
this.$message({
message: '名称和分数不能为空',
type: 'warning'
})
}
}
},
editCheck (row) {
//点击修改 判断是否已经保存所有操作
for (let i of this.tableData) {
if (i.statusBtn && i.id != row.id) {
this.$message.warning("请先保存当前编辑项");
return false;
}
}
row.statusBtn = true
this.tableName = row.name
this.tableScore = row.score
},
// 勾选弹框保存按钮
sureCheck (row) {
if (row.id !== '' && row.id !== undefined) {
this.$http
.post('', {
name: this.tableName,
score: this.tableScore,
indicationId: this.keyId,
id: row.id
})
.then(res => {
if (res.data.success === true) {
this.$message.success('编辑成功')
this.tableName = ''
this.tableScore = ''
this.checkTable()
} else {
this.$confirm(res.data.msg, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
}).catch(() => {
return false
})
}
})
.catch(function (error) {
console.log(error)
})
} else {
if (this.tableName === '' && this.tableScore === '') {
Message.warning('请补全数据')
return
}
this.$http
.post('', {
name: this.tableName,
score: this.tableScore,
indicationId: this.keyId
})
.then(res => {
if (res.data.success === true) {
row.statusBtn = false
this.$message.success('保存成功')
this.tableName = ''
this.tableScore = ''
this.checkTable()
}
})
.catch(function (error) {
console.log(error)
})
}
},
// 删除一行
deleteFun (scope) {
if (!scope.row.id) {
this.tableData.splice(scope.$index, 1)
} else {
this.$confirm('确认是否删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
})
.then(() => {
this.$http
.post('', {
id: scope.row.id
})
.then(res => {
if (res.data.success === true) {
this.$message.success('删除成功')
this.checkTable()
}
})
.catch(function (error) {
console.log(error)
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}