我需要做什么才能从 element-ui 和 vue.js 导入树以使用斜槽？

Question

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

我通过 npm install element-ui -S 导入了元素-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'
      }]
    }]
  };
},

我需要做什么才能从 element-ui 和 vue.js 导入树以使用斜槽？

What do I have to do to import tree from element-ui with vue.js to use sloped-slot?

vue.js

element-ui