html 表格点击收起,el-table表格只展开一行（点击下一行上一行关闭），不是折叠，是打开和关闭...

需求：点击其中一行的Edit按钮，打开编辑，再点击另一行的Edit按钮，上一行点过的会恢复回原先的状态，和其他行一样，类似反选，上下行切换。

目的是想做到只可单行编辑，不能多行编辑。

目前遇到bug：Edit按钮handleEdit点击事件该如何写？Edit按钮都是展示接口遍历出来的，要怎么重新赋值，然后获取下标，为啥第一个Edit按钮点了会报错，下标0找不到？

:data="tableData"

class="tb-edit"

style="width: 100%;"

border

highlight-current-row

@row-click="handleCurrentChange"

>

size="small"

v-model="scope.row.user"

:disabled="scope.row.saveButton == true?false:true && scope.row.addButton == true?false:true"

/>

{{scope.row.user}}

:disabled="scope.row.saveButton == true?false:true && scope.row.addButton == true?false:true">

{{scope.row.upload}}

:disabled="scope.row.saveButton == true?false:true && scope.row.addButton == true?false:true">

{{scope.row.option}}

{{scope.row.create_time | formatDate}}

{{scope.row.update_time | formatDate}}

id="el_Edit"

size="small"

v-show="scope.row.editButton"

@click="handleEdit(scope.$index, scope.row)"

>Edit

type="success"

size="small"

v-show="scope.row.saveButton"

@click="saveEdit(scope.$index, scope.row)"

>Save

type="success"

size="small"

v-show="scope.row.addButton"

@click="addEdit(scope.$index, scope.row)"

>Save

type="info"

size="small"

v-show="scope.row.cancelButton"

@click="cancelEdit(scope.$index, scope.row)"

>Cancel

placement="bottom"

width="160"

:ref="scope.$index"

>

Can't delete it, confirm deletion?

No

deleteHandler(scope.$index,scope.row)">Yes

Delete

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);

});

},

},

}