Failed to mount component: template or render function not defined

hungnm1518 commented 4 years ago

Thanks for your package. I have a issue while trying to run this package with element-ui. An error has been notified to me. How to fix this issue. Thanks!

ayiaq1 commented 4 years ago

<ELTreeSelect>
  <ELCol/>
</ELTreeSelect>

why ?

I think is this :

<el-form>
 <el-row>
  <el-col :span="12"> 
    <el-tree-select/>
  </el-col>
 </el-row>
</el-form>

hungnm1518 commented 4 years ago

thanks for your reply. Yeah, I wrote the code like this but the error has still occurred

samyhd commented 4 years ago

我也是出现这个问题了，npm安装后，正常引入

我精简成下面的代码也是出错，不知有没跟我项目中用到的element-ui有关

import ElTreeSelect from 'el-tree-select';

export default { name: 'Info', components: { ElTreeSelect },

vue.js:634 [Vue warn]: Failed to mount component: template or render function not defined.

found in

--->

at src/views/Info.vue at src/layout/components/AppMain.vue at src/layout/index.vue at src/App.vue 另外，我把源码中的ElTreeSelect.vue、dom.js、utils.js下载到本地在文件中引入使用，那就没上述问题。

ayiaq1 commented 4 years ago

'cnpm install' error! use: 'npm i'

ayiaq1 commented 4 years ago

main.js

import Vue from 'vue'
import App from './App.vue'

// 导入组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ElTreeSelect from 'el-tree-select';
// 注册组件库
Vue.use(ElementUI, {
    size: 'small'
});
Vue.use(ElTreeSelect);
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<!--
 * @moduleName: 模块名称
 * @Author: dawdler
 * @Date: 2020-04-12 09:15:39
 * @LastModifiedBy: dawdler
 * @LastEditTime: 2020-04-12 09:31:13
 -->
<template>
  <div id="app">
    <el-row>
      <el-col :span="12">
        <el-tree-select
          v-model="values"
          :styles="styles"
          :selectParams="selectParams"
          :treeParams="treeParams"
          ref="treeSelect"
        />
      </el-col>
      <el-col :span="12"> 当前选中数据ID：{{ values }} </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      styles: {
        width: '300px'
      },
      test: '',
      values: '',
      selectParams: {
        clearable: true,
        placeholder: '请输入内容'
      },
      treeParams: {
        clickParent: false,
        filterable: true,
        'check-strictly': true,
        'default-expand-all': true,
        'expand-on-click-node': false,
        'render-content': this._renderFun,
        data: [
          {
            testId: 1,
            name: '节点1',
            disabled: true,
            child: [
              {
                testId: 111111,
                name: '子节点'
              }
            ]
          },
          {
            testId: 3,
            name: '节点3'
          }
        ],
        props: {
          children: 'child',
          label: 'name',
          disabled: 'disabled',
          value: 'testId'
        }
      }
    };
  },
  components: {},
  methods: {
    // 自定义render
    _renderFun(h, { node }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
        </span>
      );
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

ayiaq1 / el-tree-select

Failed to mount component: template or render function not defined #46