ElementUI中的resetFields方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/element-ui/2.4.5/theme-chalk/">
</head>
<body>
<div id="id">
<h1>使用template调用函数</h1>
<el-table :data="userList" border style="width: 100%">
<el-table-column prop="username" label="姓名" width="180"></el-table-column>
<!-- 删除改良操作 -->
<el-table-column label="操作" width="190">
<template scope="scope">
<el-button type="primary" @click="showEditUser()" size="mini">点击修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 虚假的对话框 -->
<el-dialog title="修改用户信息" :="dialogEditUserVisible" width="50%" @close="closeEditDialog">
<el-form :model="editForm" ref="editUserFormRef" label-width="70px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input v-model=""></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogEditUserVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogEditUserVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<!-- 2.5.2 -->
<!-- <script src="/vue/2.5.2/"></script> -->
<script src="/vue/2.6.11/"></script>
<script src="/element-ui/2.4.5/"></script>
<script>
new Vue({
el: '#id',
data() {
return {
userList: [{ username: 1 }, { username: 2 }, { username: 3 }, { username: 4 }, { username: 5 },],
editForm: {},
dialogEditUserVisible: false
};
},
methods: {
showEditUser(tableData) {
console.log(tableData);
// 这里是一个浅拷贝
this.editForm = tableData
this.dialogEditUserVisible = true
},
// 错误根源
closeEditDialog() {
// 就是因为是浅拷贝，所以 与 tableData指向的是同一个对象，所以修改就是在修改tableData指向的对象， 而tableData是通过tamplate中的方法传递过来的，所以tableData指向的数据其实是table中的数据
// 所以table中的数据才会改变
this.$refs.editUserFormRef.resetFields()
},
},
})
</script>
</html>