极客观点
项目管理
HarmonyOS
需求：点击其中一行的Edit按钮，打开编辑，再点击另一行的Edit按钮，上一行点过的会恢复回原先的状态，和其他行一样，类似反选，上下行切换。
目的是想做到只可单行编辑，不能多行编辑。
目前遇到bug：Edit按钮handleEdit点击事件该如何写？Edit按钮都是展示接口遍历出来的，要怎么重新赋值，然后获取下标，为啥第一个Edit按钮点了会报错，下标0找不到？
<template>
<div>
<div id="cmr">
<el-table
:data="tableData"
class="tb-edit"
style="width: 100%;"
border
highlight-current-row
@row-click="handleCurrentChange"
>
<el-table-column label="Id" prop="id" width="80" align="center"></el-table-column>
<el-table-column label="User" prop="user" width="160" align="center">
<template slot-scope="scope">
<!-- @change="handleEdit(scope.$index, scope.row)" -->
<el-input
size="small"
v-model="scope.row.user"
:disabled="scope.row.saveButton == true?false:true && scope.row.addButton == true?false:true"
/>
<!-- v-show="scope.row.userInput" -->
<span>{{scope.row.user}}</span>
</template>
</el-table-column>
<el-table-column label="Num" prop="num" width="400" align="left">
<template slot-scope="scope">
<!-- @change="handleEdit(scope.$index, scope.row)" -->
<!-- <el-input
size="small"
v-model="scope.row.num"
/> -->
<!-- v-show="scope.row.userInput" -->
<div>
<el-checkbox v-model="scope.row.checked1"
:disabled="scope.row.saveButton == true?false:true && scope.row.addButton == true?false:true">
{{scope.row.upload}}
</el-checkbox>
</div>
<div>
<el-checkbox v-model="scope.row.checked2"
:disabled="scope.row.saveButton == true?false:true && scope.row.addButton == true?false:true">
{{scope.row.option}}
</el-checkbox>
</div>
</template>
</el-table-column>
<el-table-column label="Create Time" prop="create_time" width="160" align="center">
<template slot-scope="scope">
<span>{{scope.row.create_time | formatDate}}</span>
</template>
</el-table-column>
<el-table-column label="Update Time" prop="update_time" width="160" align="center">
<template slot-scope="scope">
<span>{{scope.row.update_time | formatDate}}</span>
</template>
</el-table-column>
<el-table-column label="Action" prop="action" width="200" align="center" >
<template slot-scope="scope" >
<el-button
id="el_Edit"
size="small"
v-show="scope.row.editButton"
@click="handleEdit(scope.$index, scope.row)"
>Edit
</el-button>
<!-- <el-radio-group size="small">
<el-radio-button
size="small"
>Edit</el-radio-button>
</el-radio-group> -->
<el-button
type="success"
size="small"
v-show="scope.row.saveButton"
@click="saveEdit(scope.$index, scope.row)"
>Save</el-button>
<!-- 添加行保存按钮 -->
<el-button
type="success"
size="small"
v-show="scope.row.addButton"
@click="addEdit(scope.$index, scope.row)"
>Save</el-button>
<el-button
type="info"
size="small"
v-show="scope.row.cancelButton"
@click="cancelEdit(scope.$index, scope.row)"
>Cancel</el-button>
<el-popover
placement="bottom"
width="160"
:ref="scope.$index"
>
<!-- v-model="visible" -->
<p>Can't delete it, confirm deletion?</p>
<div style="text-align: right; margin: 0">
<!-- <el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible = false">确定</el-button> -->
<el-button size="mini" type="text" @click="scope._self.$refs[scope.$index].doClose()">No</el-button>
<el-button size="mini" type="primary" @click="scope._self.$refs[scope.$index].doClose();
deleteHandler(scope.$index,scope.row)">Yes</el-button>
</div>
<el-button slot="reference" type="danger" size="small" v-show="scope.row.editButton">Delete</el-button>
</el-popover>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Axios from "axios"
import CryptoJS from 'crypto-js'
import qs from 'qs'
import store from 'storejs'
export default {
data() {
return {
loginButton: true, //登录按钮
exitButton: false, //退出按钮
login_content: false, //登录弹框
username: '', //登录用户名
password: '', //登录密码
itcode: '', //展示用户名
search: '',
file_cmr_dmu: [],
file_dmu_br: [],
token: [], //加密后用户密码
checked1: [],
checked2: [],
tableData: [],
tableBox: [],
createTime: [],
updateTime: [],
updateBox:[],
showBtn:[],
currentIndex:[],
// expands: [],
// getRowKeys(row) {
// return row.id
// },
}
},
mounted() {
// this.tableDataAdd(); //调用表格数据接口
},
methods: {
handleCurrentChange(row, event, column) {
console.log(row, event, column, event.currentTarget)
// this.selectRows = val;
},
// handleSelectionChange(val) {
// this.multipleSelection = val;
// },
// 编辑表格信息
handleEdit(index, row) {
console.log('indexxxxxxxxx', index);
console.log('rowwwwwwww', row);
var that = this
if (this.tableData.length) {
// debugger
console.log('#########', this.tableData.length);
that.currentIndex = [];
if (index) {
that.currentIndex.push(index) //每次push进去的是每行的ID
}
console.log('$$$$$$$$$', that.currentIndex);
this.tableData[that.currentIndex].saveButton = true; //保存
this.tableData[that.currentIndex].cancelButton = true; //取消
this.tableData[that.currentIndex].editButton = false; //编辑
}
else {
if (this.currentIndex == index) {
that.currentIndex.push([]) //每次push进去的是每行的ID
}
// that.currentIndex = [] //默认不展开
this.tableData[that.currentIndex].saveButton = false; //保存
this.tableData[that.currentIndex].cancelButton = false; //取消
this.tableData[that.currentIndex].editButton = true; //编辑
}
// this.tableData[that.currentIndex].saveButton = false; //保存
// this.tableData[that.currentIndex].cancelButton = false; //取消
// this.tableData[that.currentIndex].editButton = true; //编辑
},
// 表格数据接口地址，刷新按钮
tableDataAdd(){
let tokenId = store("token");
let api = "/ar/getAdmin?token="+tokenId;
Axios.get(api).then(res => {
// this.createTime = res.data.create_time;
this.updateTime = res.data.update_time;
this.tableData = res.data.map(item => {
item.addButton = false; //添加行保存按钮
item.saveButton = false; //保存按钮
item.cancelButton = false; //取消按钮
item.editButton = true; //编辑按钮
// item.selection = true; //勾选按钮
item.userInput = true; //用户
item.numButton = false; //增加行的num数据
item.upload = "allowing uploading";
item.option = "access to option 7";
// item.currentIndex = [];
if(item.num.indexOf('1')!= -1){
item.checked1 = true;
}else{
item.checked1 = false;
}
if(item.num.indexOf('2')!= -1){
item.checked2 = true;
}else{
item.checked2 = false;
}
return item
});
})
.catch(e => {
console.log(e);
});
},
},}
</script>
增加一个字段用来标记编辑是否展开例如isOpenEdite: false，点击当前的，该值为true,其他的使用循环变为false