我必须怎么做才能使用 vue.js 从 element-ui 导入树才能使用倾斜槽？

Question

我想创建一个 vue 组件，它显示一个带有斜槽的 element-ui 树。

我通过 npm install element-ui -S 导入了 element-ui，它在我的 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>

Answer 1

您在 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'
      }]
    }]
  };
},