elementui table expand 修改数据

1.我的设计思路是当点击expand箭头后显示出来内容，然后双击(单击也可以，根据自己想法来)某个区域，然后弹窗进行数据修改，然后双向绑定进行数据渲染，点击保存按钮后数据传输到后台进行数据修改

2.看下效果图

3.然后双击其中的字段进行弹窗，然后进行值的修改

点击确定后，将数据渲染到页面上，然后点击保存按钮进行后端交互

4.下面是具体的代码，首先给expand里的参数添加点击事件

<el-table-column type="expand"><template slot-scope="props"><el-formlabel-position="left"inlineclass="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); // 修改的值所在的索引},

elementui table expand 修改数据相关推荐

2、ALTER TABLE：修改数据表
修改数据表的前提是数据库中已经存在该表.修改表指的是修改数据库中已经存在的数据表的结构.修改数据表的操作也是数据库管理中必不可少的,就像画素描一样,画多了可以用橡皮擦掉,画少了可以用笔加上. 不了解如 ...
elementUi——table组件修改表头和表身行样式——style的使用
今天在做后台管理系统时,遇到一个需求,就是根据表格中每行数据的状态,来渲染背景颜色. 如下图所示:满足一定条件时,背景颜色要改为绿色. row-style的使用 1.在el-table上添加row-s ...
php 相同数据合并单元格,elementUI table合并相同数据的单元格
直接扔代码~ import moment from "moment"; export default { methods: { objectSpanMethod({ row, co ...
elementui的table展开行显示另一关联子table表的数据
需求:主表table可实现展开行显示关联子table的列表数据 <div class="table-box"><el-tableref="enquir ...
MySQL修改数据表（ALTER TABLE语句）
为实现数据库中表规范化设计的目的,有时候需要对之前已经创建的表进行结构修改或者调整. 在 MySQL 中可以使用 ALTER TABLE 语句来改变原有表的结构,例如增加或删减列.创建或取消索引.更改 ...
修改数据库主键为自增长时报错“[Err] 1062 - ALTER TABLE causes auto_increment resequencing, resulting in duplicate ”
修改数据库主键为自增长时报错: [Err] 1062 - ALTER TABLE causes auto_increment resequencing, resulting in duplicate ...
elementui 双击el-table表格展示输入框修改数据
参考:element ui 双击表格展示输入框修改数据_7ing酒的博客-CSDN博客_双击输入框展示: 功能:就是一个简单的table表格通过双击某一项进行修改.(其实就是双击之后变成一个in ...
ag-grid 中外部编辑数据同步修改table单元格数据，数据实时更新
ag-grid 中外部编辑数据同步修改table单元格数据这里只探讨本人已经使用的一个方法 getTags(params).then(res => {console.log(res, '=== ...
html里ajax使用、webpy服务在img显示图片、ajax修改table里的数据、$.post()、window,onload、$(button).click、mjpg_streamer
1.ajax的使用,下面是基于webpy完成的例子: 后台相应代码: class AjaxFriendReq:def POST(self):try:i = web.input()#要使用这个get来获 ...

elementui table expand 修改数据

elementui table expand 修改数据相关推荐

最新文章

热门文章