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); // 修改的值所在的索引 },
