Closed hqzh closed 4 years ago
很奇怪的是components: { ElTreeSelect }
换成comments: { ElTreeSelect }
正常
nextTick生命周期之后使用ref
nextTick生命周期之后使用ref
await this.$nextTick() 一样的问题 很奇怪的是components: { ElTreeSelect } 换成comments: { ElTreeSelect } 正常 ,这个我就百思不得其解了
<template>
<el-tree-select
:styles="styles"
v-model="values"
:selectParams="selectParams"
:treeParams="treeParams"
@searchFun="_searchFun"
@node-click="_nodeClickFun"
ref="treeSelect"
/>
</template>
<script>
import ElTreeSelect from 'el-tree-select';
export default {
components: { ElTreeSelect },
data() {
return {
styles: {
width: '300px',
},
test: '',
values: '',
selectParams: {
multiple: true,
clearable: true,
placeholder: '请输入内容',
},
treeParams: {
clickParent: false,
filterable: true,
'check-strictly': true,
'default-expand-all': true,
'expand-on-click-node': false,
data: [],
props: {
children: 'child',
label: 'name',
disabled: 'disabled',
value: 'testId',
},
},
};
},
async mounted() {
let data = [
{
testId: '1',
name: '节点1',
disabled: true,
child: [
{
testId: '11111',
name: '子节点',
},
],
},
{
testId: '2',
name: '节点2',
child: [
{
testId: '222222',
disabled: true,
name: '子节点',
},
],
},
{
testId: '3',
name: '节点3',
},
{
testId: '4',
name: '节点4',
},
{
testId: '5',
name: '节点5',
},
{
testId: '6',
name: '节点6',
},
];
// setTimeout(() => {
await this.$nextTick()
this.treeParams.data = data;
// await this.$nextTick()
this.$refs.treeSelect.treeDataUpdateFun(data);
// }, 4000);
},
methods: {
// 下拉框修改
_selectChange(val) {
console.log(val, '<-select change');
},
// 树点击
_nodeClickFun(data, node, vm) {
console.log('this _nodeClickFun', this.values, data, node);
},
// 树过滤
_searchFun(value) {
console.log(value, '<--_searchFun');
// 自行判断 是走后台查询,还是前端过滤
// this.$refs.treeSelect.$refs.tree.filter(value);
this.$refs.treeSelect.filterFun(value);
// 后台查询
// this.$refs.treeSelect.treeDataUpdateFun(treeData);
},
},
};
</script>
el-tree-select的使用 需要Vue.use注册,否则就需要走import 可以打印 this.$refs.xx
el-tree-select的使用 需要Vue.use注册,否则就需要走import 可以打印 this.$refs.xx
使用了import啊,报错不是说找不到this.$refs.treeSelect,而是找不到报错的那个方法,大佬可以试下import方式
如果要用 el-tree-select 需要 Vue.use 并且取消 import
总结一下,组件内使用直接import就好了,不需要commponets:{ElTreeSelect}