我要评论实现效果：
核心代码：
<el-table :data="items"
style="width: 100%;margin-top: 16px"
border
:key="randomkey">
<el-table-column label="计划名称"
property="name">
<template slot-scope="{row}">
<template v-if="row.edit">
<el-input v-model="row.name"></el-input>
</template>
<span v-else>{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column label="计划完成时间"
property="executiondate" width="175">
<template slot-scope="scope">
<el-date-picker v-if="scope.row.edit" style="width: 153px;" type="date"
v-model="scope.row.timeend">
</el-date-picker>
<span v-else>{{ parsetime(scope.row.timeend) }}</span>
</template>
</el-table-column>
<el-table-column label="协同人"
property="leaderlist">
<template slot-scope="scope">
<template v-if="scope.row.edit">
<el-select
v-model="scope.row.leaderlist"
clearable filterable multiple>
<el-option
v-for="item in userlist"
:key="item.userid"
:label="item.nickname"
:value="item.userid">
</el-option>
</el-select>
</template>
<span v-else>{{ scope.row.leadername }}</span>
</template>
</el-table-column>
<el-table-column label="执行人" width="80">
<template>
<span>{{ $store.getters.name }}</span>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="100">
<template slot-scope="{row,column,$index}">
<el-button
v-if="row.edit"
type="success" icon="el-icon-check" circle
size="small"
@click="confirmedit(row)"
>
</el-button>
<el-button
v-if="row.edit"
icon="el-icon-close" circle
size="small"
@click="canceledit(row)"
>
</el-button>
<el-button
type="primary" icon="el-icon-edit" circle
v-if="!row.edit"
size="small"
@click="row.edit=!row.edit"
>
</el-button>
<el-button
type="danger" icon="el-icon-delete" circle
size="small" @click="handledelete($index)"
v-if="!row.edit"
>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div style="display: flex;margin-top: 28px;justify-content: center;">
<el-button @click="addson" size="small" icon="el-icon-plus">添加子计划</el-button>
</div>method：
canceledit(row) {
row.name = row.oldname
row.leaderlist = row.oldleaderlist
row.timeend = row.oldtimeend
row.leadername = row.oldleadername
row.edit = false
this.$message({
message: '已恢复原值',
type: 'warning'
})
},
confirmedit(row) {
row.edit = false
row.oldname = row.name
row.oldleaderlist = row.leaderlist
row.oldtimeend = row.timeend
let arr = []
row.leaderlist.foreach(i => {
let username = this.userlist.find(({userid}) => userid === i).nickname
arr.push(username)
})
row.leadername = arr.join()
row.oldleadername = row.leadername
this.$message({
message: '修改成功',
type: 'success'
})
},
handledelete(index) {
this.items.splice(index, 1)
},
addson() {
this.items.push({
name: null,
timeend: null,
leaderlist: [],
leadername: null,
edit: true
})
},到此这篇关于基于el-table实现行内增删改的文章就介绍到这了,更多相关el-table行内增删改内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论