不知道大家有没有遇到过这种坑：
使用饿了么表单组件，我想选中当前行信息，使用编辑查看当店转中的节点
点击第一行编辑
嗯，没毛病。当点击第二行时
嗯，有毛病。
当时我想使用tree的树节点来实现实时刷新，但发现饿了么组件现有的例子根本行不通！当点击编辑时，tree的ref根本没有渲染，直接报错refs is undefined！
想了很久，怎么才能在第二次点击时，不保留第一次选中的选项。这个问题基本困扰了我一天。最后不得已换了一个思路。。。
思路时这样的，在打开对话框时有一个open方法，可以在open方法中将此行选中的目录赋值给全局变量，在open时渲染。 代码如下：
<div class="tree"> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed prop="date" label="日期" width="150"></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="province" label="省份" width="120"></el-table-column> <el-table-column prop="city" label="市区" width="120"></el-table-column> <el-table-column prop="address" label="地址" width="300"></el-table-column> <el-table-column prop="zip" label="邮编" width="120"></el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button> </template> </el-table-column> </el-table> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @open="handleOpen" :before-close="handleClose"> <el-tree :data="data" show-checkbox node-key="id" ref="tree" :default-expanded-keys="[2, 3]" :default-checked-keys="choose" :props="defaultProps" ></el-tree> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </el-dialog> </div> <script> export default { data() { return { dialogVisible: false, tableData: [ { date: "2016-05-02", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, curChoose:[9] }, { date: "2016-05-04", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1372 弄", zip: 200333, curChoose:[10] }, { date: "2016-05-01", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1519 弄", zip: 200333 }, { date: "2016-05-03", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1516 弄", zip: 200333 } ], data: [ { id: 1, label: "上海", children: [ { id: 4, label: "普陀区", children: [ { id: 9, label: "金沙江路 1518 弄" }, { id: 10, label: "金沙江路 1372 弄" } }, { id: 11, label: "金沙江路 1516 弄" } ] } ] }, { id: 2, label: "江苏省", children: [ { id: 5, label: "苏州市" }, { id: 6, label: "泰州市" } ] }, { id: 3, label: "浙江省", children: [ { id: 7, label: "宁波市" }, { id: 8, label: "杭州市" } ] } ], choose: [], defaultProps: { children: "children", label: "label" } }; }, methods: { handleClose(done) { this.$confirm("确认关闭？") .then(_ => { done(); }) .catch(_ => {}); }, handleOpen(){ this.$refs.tree.setCheckedKeys(this.choose); }, edit(curMsg) { this.dialogVisible = true; console.log("当前行信息", curMsg); this.choose = curMsg.curChoose console.log(this.choose) }, handleClick(row) { console.log(row); } } }; </script>
作者：ClyingDeng
链接：https://juejin.cn/post/6844903998944706568
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。处。
