如何在vue.extend的模板中使用element-ui的组件？

Question

问题描述

使用vue.extend方式写了一个组件，想在模板中使用el-table组件，elementui为全局引入

相关代码

customTable组件

<template>
  <el-table height="200px" :data="list">
    <el-table-column prop="name" label="名字" />
    <el-table-column prop="addr" label="地址" />
  </el-table>
</template>

<script>
export default {
    props:{
        list:{
            type:Array
            default:function(){
                return []
            }
        }
    }
};
</script>

App组件

<template>
  <div id="app">
    <div ref="map" class="map" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import AMap from "AMap";
import Vue from "vue/dist/vue.esm.js";
import customTable from '@/components/table.vue'
export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new AMap.Map(this.$refs.map, {
        center: [116.398801, 39.907123],
        zoom: 11,
      });
      const maker = new AMap.Marker({
        position: [116.398801, 39.907123],
        extData: [
          {
            name: "test",
            addr: "adfh",
          }
        ],
      });
      maker.on("click", (e) => {
        const self = this
        const extData = e.target.getExtData();
        const infowindowWrap = Vue.extend({
          template: ` <customTable :list="list"> </customTable>`,
          name: "test",
          components: {
            customTable:customTable
          },
          data() {
            return {
              list: extData,
            };
          },
          methods: {
            handlerClose() {
              self.map.clearInfoWindow();
            },
          },
        });
        const component = new infowindowWrap().$mount();
        const infowindow = new AMap.InfoWindow({
          isCustom: false,
        });
        infowindow.setContent(component.$el);
        infowindow.open(this.map, e.lnglat);
      });
      this.map.add(maker);
    },
  },
};
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

期待结果：点击地图点位弹窗表格展示数据
错误信息：vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <el-table> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

报错很明显嘛 就是说你组件未注册 只需要加一句话就好啦
你这边 只
import customTable from '@/components/table.vue'
但是没有注册
所以加上下面这个就可以啦

 
export default {
  data() {
    return {
      map: null,
    };
  },
 components: {
// 这里就是注册你的组件
    customTable

},