1. 页面部分
imput主要部分:
<el-input type="text" class="ellipsis"
:disabled="scope.row.checked" v-model="scope.row.feedingPolicyTitle"/>
按钮主要部分:
<el-button type="primary" plain size="mini"
v-if="scope.row.checked == true"
:disabled="disabledBtn" @click="feedingStrategyOpen(scope.row)">
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="primary" plain size="mini"
v-if="scope.row.checked == false"
@click="feedingStrategyEditOpen(scope.$index, scope.row)"
class="refresh-button">
<i class="el-icon-refresh"></i> 更新
</el-button>
<div style="margin-top: 10px">
<el-table
:row-class-name="tableRowClassName"
border class="disabled-table"
:cell-style="{padding: '0'}"
:row-style="{height: '55px'}"
:data="tableDataFeedingStrategy"
style="width: 100%;margin: 0 auto;">
<el-table-column property="feedingPolicyTitle" label="饲喂名称" width="168">
<template slot-scope="scope">
<el-input type="text" class="ellipsis"
:disabled="scope.row.checked"
v-model="scope.row.feedingPolicyTitle"/>
</template>
</el-table-column>
<el-table-column label="操作" width="260">
<template slot-scope="scope">
<el-button type="primary" plain size="mini"
v-if="scope.row.checked == true"
:disabled="disabledBtn" @click="feedingStrategyOpen(scope.row)">
<i class="el-icon-edit"></i> 编辑
</el-button>
<el-button type="primary" plain size="mini"
v-if="scope.row.checked == false"
@click="feedingStrategyEditOpen(scope.$index, scope.row)"
class="refresh-button">
<i class="el-icon-refresh"></i> 更新
</el-button>
<el-button type="info"
v-if="scope.row.checked == false" @click="getParams"
size="mini">
<i class="el-icon-close"></i> 取消
</el-button>
</template>
</el-table-column>
</el-table>
</div>
2. data部分
data() {
return {
disabledBtn: false,
},
3.事件部分
//从后台获取的全部数据
getParams() {
allFeedingStrategy('get', {
}).then(res => {
if (res.code == 200) {
this.tableDataFeedingStrategy = res.data.records;
this.tableDataFeedingStrategy.forEach(ele => {
ele.checked = true
})
} else {
this.$message.error(res.desc)
}
},
//表格事件 <el-table :row-class-name="tableRowClassName"
tableRowClassName({row}) {
if (row.checked == false) {
return 'strategy-row';
}
},
//编辑操作事件
feedingStrategyOpen(row) {
row.checked = false;
this.disabledBtn = true;
this.tableRowClassName({row})
},
//策略更新数据
feedingStrategyEditOpen(index, row) {
this.disabledBtn = false;
console.log(row)
allFeedingStrategy('get', { //这里执行更新请求发送后台
}).then(res => {
if (res.code == 200) {
} else {
this.$message.error(res.desc)
}
},