vue.js - 我必须怎么做才能使用 vue.js 从 element-ui 导入树才能使用倾斜槽?
问题描述
我想创建一个 vue 组件,它显示一个带有斜槽的 element-ui 树。
我通过导入了 element-ui npm install element-ui -S
,它列在我的 node_modules 文件夹中。
我尝试通过以下代码显示树,但它不起作用。
<template>
<div>
<h1>Testing Sloped Slot of element-ui tree with vue.js</h1>
<el-tree
:data="data"
show-checkbox
node-key="id"
default-expand-all
:expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span><b>{{ node.label }}</b></span>
</span>
</el-tree>
</div>
</template>
<script>
import tree from 'element-ui'
export default {
name: 'chart',
data() {
return data = [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}];
},
}
Vue.use(tree);
</script>
解决方案
您在 data() 方法中有错字。
Vue 将从 data() 对象返回的合并到“this”中。因此,如果您已经data() { return {a: '1'}; }
-在组件中或仅在模板中a
可用。this.a
a
您的 data() 应如下所示:
data() {
return {
data: [{
id: 1,
label: 'Level one 1',
children: [{
id: 4,
label: 'Level two 1-1',
children: [{
id: 9,
label: 'Level three 1-1-1'
}, {
id: 10,
label: 'Level three 1-1-2'
}]
}]
}, {
id: 2,
label: 'Level one 2',
children: [{
id: 5,
label: 'Level two 2-1'
}, {
id: 6,
label: 'Level two 2-2'
}]
}]
};
},