vue+elementui el-table增删改查
<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='s..
·
<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="操作">
<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>
// 判断值内容是否全部填写
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 {
if (this.flagFun()) {
this.tableData.push({ name: '', score: '', statusBtn: true })
} else {
this.$message({
message: '名称和分数不能为空',
type: 'warning'
})
}
}
},
editCheck(row) {
row.statusBtn = true
this.tableName = row.name
this.tableScore = row.score
},
// 勾选弹框保存按钮
sureCheck(row) {
// console.log(row)
if (row.id !== '' && row.id !== undefined) {
this.$http
.post('url', {
name: this.tableName,
score: this.tableScore,
id: row.id
})
.then(res => {
if (res.data.success === true) {
this.$message.success('编辑成功')
this.tableName = ''
this.tableScore = ''
this.checkTable()
} else {
this.$message.warning(res.data.msg)
}
})
.catch(function(error) {
console.log(error)
})
} else {
// console.log(row.id + 'add')
if (this.tableName === '' && this.tableScore === '') {
Message.warning('请补全数据')
return
}
this.$http
.post('url', {
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()
} else {
this.$message.warning(res.data.msg)
}
})
.catch(function(error) {
console.log(error)
})
}
},
checkTable() {
this.$http.get('url?indicationId=' +this.keyId).then(res => {
if (res.data.success === true) {
let arr = res.data.data
for (let item of arr) {
item['statusBtn'] = false
}
this.tableData = arr
} else {
this.$message.warning(res.data.msg)
}
})
.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('url', {id: scope.row.id}).then(res => {
if (res.data.success === true) {
this.$message.success('删除成功')
this.checkTable()
} else {
this.$message.warning(res.data.msg)
}
})
.catch(function(error) {
console.log(error)
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
更多推荐
已为社区贡献30条内容
所有评论(0)