使用vue.js从element-ui导入树需要做什么才能使用sloped-slot？

Question

我想创建一个vue组件，它显示一个带有sloped-slot的元素-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() {
  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'
      }]
    }]
  };
},