动态组件切换

<template>
<div class="title">
  <h1>TPAS</h1>
  <p>this is a text</p>
</div>
<div class="table">
  <button @click="changeButton='left'">左边</button>
  <button @click="changeButton='right'">右边</button>
  <component :is="changeButton"></component> 
</div>

</template>

<script>
import left from 'E:/ant-design-table/ant/src/components/left.vue'
import right from 'E:/ant-design-table/ant/src/components/right.vue'
export default{
  data(){
    return{
      changeButton:'left'
    }
  },
  components: {
    left,
    right
  }
  }
</script>

<style scoped>
.title{
  text-align: left;
}

.table{
  text-align: left;
}
</style>