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

如何使用vue.js从element-ui导入树以使用倾斜槽，该怎么办？

1 个答案: