<el-table-column width="40">
<template slot-scope="scope">
<el-button type="text" @click="hangClick(scope.row)">
<i class="el-icon-arrow-right"></i>
</el-button>
</template>
</el-table-column>
//下拉后展示的内容
<el-table-column type="expand" width="1">
<template slot-scope="props">
<el-button type="primary" @click="addRepairDetailDiv(props,'add')">添加维修明细</el-button>
//添加表单
<el-form
v-if="submitType=='add'"
inline
class="addRepairDetailForm"
:model="addRepairDetailForm"
label-width="80px"
>
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6" class="grid-content">
<el-form-item label="维修人员">
<el-input v-model="addRepairDetailForm.CE11" placeholder="维修人员"></el-input>
</el-form-item>
</el-col>
<el-col :span="6" class="grid-content">
<el-form-item label="维修时间">
<el-date-picker
v-model="addRepairDetailForm.CE10"
align="right"
type="date"
placeholder="维修时间"
></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6" class="grid-content">
<el-form-item>
<el-button type="primary" plain @click="submit(props.row)">提交</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
//展示和编辑
<div v-for="(repairDetail,index) in repairDetails" :key="index" class="repairDetail">
<el-form inline :model="repairDetailForm" label-width="80px">
<el-row type="flex" class="row-bg" justify="space-around">
<el-col :span="6" class="grid-content">
<el-form-item label="维修人员">
<el-input
v-if="isInput[index]"
v-model="repairDetailForm.ce11"
placeholder="维修人员"
></el-input>
<span v-else class="formSpan">{{repairDetail.CE11||repairDetail.ce11}}</span>
</el-form-item>
</el-col>
<el-col :span="6" class="grid-content">
<el-form-item label="维修时间">
<el-date-picker
v-if="isInput[index]"
v-model="repairDetailForm.ce10"
align="right"
type="date"
placeholder="维修时间"
></el-date-picker>
<span
class="formSpan"
v-else
>{{formatDate(repairDetail.CE10||repairDetail.ce10)}}</span>
</el-form-item>
</el-col>
<el-col :span="6" class="grid-content">
<el-form-item>
<el-button type="primary" @click="submit(repairDetail,index)">确定</el-button>
<el-button
type="primary"
@click="editRepair(repairDetail,index,'edit')"
>编辑</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<div style="overflow:hidden"></div>
</el-table-column>
1、
<div style="overflow:hidden"></div>
,<el-table-column type="expand" width="1">
以及<el-table style="margin-left:1px" >
是为了隐藏他原本的图标,最后发现并没有什么用,最后在样式里写了.propertybase012Table .el-table__expand-icon{ display: none; }
2、对自己写的箭头没有做处理,最好能做个处理
//展示下拉内容
hangClick(row) {
//循环表格数据,对id进行判断
//toggleRowExpansion可以看下官方文档
this.crud.data.forEach(item => {
if (row.rowsid != item.rowsid) {
this.$refs.table.toggleRowExpansion(item, false);
}
});
this.$refs.table.toggleRowExpansion(row);
this.repairDetailForm = {};
this.repairRowguid = row.rowguid;
this.repairDetails = [];
//这里是掉后台接口,根据id查询对应的数据
getListByRowGuid(this.repairRowguid).then(res => {
if (res.length > 0) {
res.forEach(repairDetail => {
this.nameToLowerCase(repairDetail);
if (repairDetail.ce35 == row.rowguid) {
this.repairDetails.push(repairDetail);
}
});
} else {
this.repairDetails = [];
}
});
},
//展示添加的form表单
//row是当前行的数据,submitType当前form类型
addRepairDetailDiv(row, submitType) {
this.submitType = submitType;
this.addRepairDetailForm = {};
},
//展示编辑的form表单
//row是当前行的数据,index是当前所选择的行的index,submitType当前form类型
editRepair(row, index, submitType) {
console.log(row);
this.submitType = submitType;
this.repairDetailForm = row;
let repairDetailDiv = document
.querySelectorAll("div.repairDetail")
.item(index);
let span = this.getElementsByClassName(repairDetailDiv, "formSpan");
//isInput是展示input输入框的,注意看上面的查看和编辑表单,是一起展示的,需要去判断
this.isInput[index] = true;
console.log(this.isInput[index]);
},
//提交功能
submit(row, index) {
if (this.submitType == "edit") {
let data = row;
console.log(data);
//nameToLowerCase是将对象中的字段转换成小写
this.nameToLowerCase(data);
edit(data).then(() => {
this.isInput = [];
});
} else {
let data = row;
data.rowsid = undefined;
delete data.rowsid;
data.ce35 = this.repairRowguid;
data.ce11 = this.addRepairDetailForm.CE11;
data.ce10 = this.addRepairDetailForm.CE10;
add(data).then(res => {
this.submitType = "";
this.repairDetails.push(res);
});
}
},
Vue.prototype.nameToLowerCase=function (object) {
let regObj = new RegExp("([A-Z]+)", "g");
for (let i in object) {
if (object.hasOwnProperty(i)) {
let temp = object[i];
if (regObj.test(i.toString())) {
temp = object[i.replace(regObj, function (result) {
return result.toLowerCase();
})] = object[i];
delete object[i];
}
if (typeof temp === 'object' || Object.prototype.toString.call(temp) === '[object Array]') {
this.nameToLowerCase(temp);
}
}
}
return object;
};
以上就是第一种方式,但是着实麻烦,今天刚好又碰到一样的需求,又研究了下
只需要给table标签添加事件,@expand-change="expandChange"
,有两个参数,第一个是你点击的当前行的数据,第二个是展开行的数组
<div style="overflow:hidden"></div>
,<el-table-column type="expand" width="1">
以及<el-table style="margin-left:1px" >
都不用写,是不是方便多了
下面贴一下第二种方法的代码,主要是函数部分
expandChange(row, expandedRows) {
let params = {};
this.patrolDetails = [];
this.editForm = {};
// let lastExpandedRows = expandedRows.pop();
for (let i = 0; i < expandedRows.length; i++) {
const item = expandedRows[i];
if (row.rowsid != item.rowsid) {
this.$refs.table.toggleRowExpansion(item, false);
}
}
params.rowguid = row.rowguid;
this.relguid = row.rowguid;
crudproperty.getListByRowGuid(params).then(res => {
if (res.length > 0) {
res.forEach(item => {
this.nameToLowerCase(item);
});
this.patrolDetails = res;
} else {
this.patrolDetails = [];
}
});
}