element ui表格新增“编辑”按钮,点击后弹框并显示当前行信息而且可修改编辑,对弹框内容编辑修改后,在未提交时不影响整个页面的数据
需求如标题,起初直接用this.template=row,发现即使把编辑弹框关掉(右上角X掉),vue的双向绑定还是检测到了row的变化,所以不能直接=赋值,需要对对象(或数组)先进行深拷贝,才不会影响到原row。html代码如下:<!-------------------表格-----------------------------><el-table highlight-cu
·
需求如标题,起初直接用this.template=row,发现即使把编辑弹框关掉(右上角X掉),vue的双向绑定还是检测到了row的变化,所以不能直接=赋值,需要对对象(或数组)先进行深拷贝,才不会影响到原row。
html代码如下:
<!-------------------表格----------------------------->
<el-table highlight-current-row :data="customerList" :loading="customerListloading" style="width: 100%;"
:default-sort="{prop: 'update_time', order: 'descending'}">
<el-table-column label="姓名" prop="name">
</el-table-column>
<el-table-column label="年龄" prop="age">
</el-table-column>
<el-table-column label="性别">
<template scope="scope">
<span v-html="sex(scope.row)"></span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template scope='scope' slot-scope="scope">
<el-button type='text' @click.native.prevent="templateMsg (scope.row)">编辑</el-button>
<el-button type='text' @click="handleDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!----------------------------- 编辑弹框 -------------------------->
<el-dialog title="编辑" :visible.sync="dialogVisibleBJ" :data="templateList">
<template scope='scope'>
<el-form :model="templateList" :rules="rules" ref="templateList" style="padding-left: 30px;">
<el-row class="row_i">
<el-col :span="12" class="col_i" style="width:135px">
<span class="h2"></span>
<span class="title2">姓名:</span>
</el-col>
<el-form-item prop="name">
<el-input style="width: 310px;" v-model="templateList.name"></el-input>
</el-form-item>
</el-row>
<el-row class="row_i">
<el-col :span="12" class="col_i">
<span class="h2"></span>
<span class="title2">年龄:</span>
</el-col>
<el-form-item prop="title">
<el-input v-model="templateList.age"></el-input>
</el-form-item>
</el-row>
<el-row class="row_i">
<el-col :span="12" class="col_i">
<span class="h2"></span>
<span class="title2">性别:</span>
</el-col>
<el-col :span="17">
<el-input placeholder="" v-model="templateList.sex"></el-input>
</el-col>
</el-row>
</el-form>
</template>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm('templateList',templateList)">确定</el-button>
</span>
</el-dialog>
js代码如下:
/**
* 点击拿到当前行的信息
* @method templateMsg
* @param {*} row
*/
templateMsg(row) {
//不可直接this.templateList = row;
//直接赋值属于对对象的浅拷贝,a=b这种赋值方式,改变B,a在vue双向绑定的情况下也会跟着变化,就是说你的编辑弹框没有点击确定修改按钮,页面也会变化
this.templateList = extendCopy(row);
// 对象进行深拷贝,否则“编辑”框内修改内容(row)会影响到页面
function extendCopy(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
},
更多推荐
已为社区贡献1条内容
所有评论(0)