不知道大家有没有遇到过这种坑:
使用饿了么表单组件,我想选中当前行信息,使用编辑查看当店转中的节点



当时我想使用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>