1.我的设计思路是当点击expand箭头后显示出来内容，然后双击(单击也可以，根据自己想法来)某个区域，然后弹窗进行数据修改，然后双向绑定进行数据渲染，点击保存按钮后数据传输到后台进行数据修改
2.看下效果图
3.然后双击其中的字段进行弹窗，然后进行值的修改
点击确定后，将数据渲染到页面上，然后点击保存按钮进行后端交互
4.下面是具体的代码，首先给expand里的参数添加点击事件
<el-table-column type="expand">
<template slot-scope="props">
<el-form
label-position="left"
inline
class="demo-table-expand"
style="background-color:pink"
>
<el-form-item label="项目名称：">
<span
@dblclick="
updateInfo(
'项目名称',
'name',
props.$index,
props.row.name,
'plainInput'
)
"
>{{ props.row.name }}</span
>
</el-form-item>
<el-form-item label="项目版本：">
<span
@dblclick="
updateInfo(
'项目版本',
'version',
props.$index,
props.row.version,
'plainInput'
)
"
>{{ props.row.version }}</span
>
</el-form-item>
<el-form-item label="运行状态：">
<span
@dblclick="
updateInfo(
'运行状态',
'runStatus',
props.$index,
props.row.runStatus,
'select'
)
"
>{{ props.row.runStatus }}</span
>
</el-form-item>
<el-form-item label="开发状态：">
<span
@dblclick="
updateInfo(
'开发状态',
'devStatus',
props.$index,
props.row.devStatus,
'select'
)
"
>{{ props.row.devStatus }}</span
>
</el-form-item>
<el-form-item label="需 求 方 ：">
<span
@dblclick="
updateInfo(
'需 求 方',
'demand',
props.$index,
props.row.demand,
'plainInput'
)
"
>{{ props.row.demand }}</span
>
</el-form-item>
<el-form-item label="项目类型：">
<span
@dblclick="
updateInfo(
'项目类型',
'type',
props.$index,
props.row.type,
'select'
)
"
>{{ props.row.type }}</span
>
</el-form-item>
<el-form-item label="推 送 人 ：">
<span
@dblclick="
updateInfo(
'推 送 人',
'pusher',
props.$index,
props.row.pusher,
'select'
)
"
>{{ props.row.pusher }}</span
>
</el-form-item>
<el-form-item label="负 责 人 ：">
<span
@dblclick="
updateInfo(
'负 责 人',
'principal',
props.$index,
props.row.principal,
'plainInput'
)
"
>{{ props.row.principal }}</span
>
</el-form-item>
<el-form-item label="计划开始时间：">
<span
@dblclick="
updateInfo(
'计划开始时间',
'planStartTime',
props.$index,
props.row.planStartTime,
'timePicker'
)
"
>{{ props.row.planStartTime }}</span
>
</el-form-item>
<el-form-item label="计划结束时间：">
<span
@dblclick="
updateInfo(
'计划结束时间',
'planEndTime',
props.$index,
props.row.planEndTime,
'timePicker '
)
"
>{{ props.row.planEndTime }}</span
>
</el-form-item>
<el-form-item label="创建时间：">
<span>{{ props.row.createTime }}</span>
</el-form-item>
<el-form-item label="最后修改时间：">
<span>{{ props.row.updateTime }}</span>
</el-form-item>
<el-form-item label="项目描述：">
<span
@dblclick="
updateInfo(
'项目描述',
'description',
props.$index,
props.row.description,
'textArea'
)
"
>{{ props.row.description }}</span
>
</el-form-item>
<el-form-item label="">
<el-button type="primary" @click="savePane(props)" size="mini"
>保存</el-button
>
</el-form-item>
</el-form>
</template>
</el-table-column>5.下面是对应的参数初始化，和点击事件方法
data() {
return {
...
updateDialog: false,
updateDialogFieldCn: "", // 要修改的属性名-中文
updateDialogFieldEn: "", // 要修改的属性名-英文
updateDialogDefaultValue: "", // 修改弹窗中默认的值
updateDialogFieldType: "", // 弹窗中组件的类型
updateDialogRowIndex: 0 // 修改的值所在的行索引
};
},6.弹窗的部分代码，主要通过updateDialogFieldType进行区分
<!-- 双击属性事件的弹窗 -->
<el-dialog
:title="'修改' + updateDialogFieldCn"
:visible.sync="updateDialog"
>
<el-form v-if="updateDialogFieldType=== 'plainInput'">
<el-form-item :label="updateDialogFieldCn" label-width="120px">
<el-input v-model="updateDialogDefaultValue"></el-input>
</el-form-item>
.... 后面为updateDialogFieldType='select',updateDialogFieldType='timePicker'等其他的布局
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="updateDialog = false">取 消</el-button>
<el-button type="primary" @click="saveUpdateDialog">确 定</el-button>
</div>
</el-dialog>7.双击expand中属性值触发的事件
// 定义pane中部件的点击事件
updateInfo(cn, en, index, originValue, type) {
// cn:要修改的属性值中文名，作为弹窗表单中组件的label和弹窗的title
// en:要修改的属性值英文名，用在点击保存后给对象的某个属性设值的时候用
// index:为修改的值所在tabData的行索引，用来进行值修改
// originValue为该字段对应的原始默认值，用来进行渲染
// type为弹窗中的组件类型，plainInput，select，timePicker，textArea等，根据需求名字自己定
this.updateDialog = true;
this.updateDialogFieldCn = cn;
this.updateDialogFieldEn = en;
this.updateDialogRowIndex = index;
this.updateDialogDefaultValue = originValue;
this.updateDialogFieldType = type;
},8.然后是弹窗确定按钮的点击事件
// 修改弹窗的确定按钮的点击事件
saveUpdateDialog() {
this.updateDialog = false;
let obj = this.tableData[this.updateDialogRowIndex]; // 获取tableData中该行的对象
obj[this.updateDialogFieldEn] = this.updateDialogDefaultValue; // 修改该对象中指定属性的值
// 属性值还原初始化
(this.updateDialogFieldCn = ""), // 要修改的属性名-中文
(this.updateDialogFieldEn = ""), // 要修改的属性名-英文
(this.updateDialogFieldType = ""), // 弹窗中组件的类型
(this.updateDialogFieldType = 1), // 弹窗中组件的类型
(this.updateDialogRowIndex = 0); // 修改的值所在的索引
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
