Component template should contain exactly one root element. If you are using v-if on multiple elemen

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 出错的情况
这个问题的原因 VUE中标签之下只能一个子元素
出错代码如下:

<template>
  <div >	  
    sdfsdfjsdaklfjasldf
  </div>
  <div>
	  <el-table
	      :data="tableData"
	      style="width: 100%">
	      <el-table-column
	        prop="date"
	        label="日期"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="address"
	        label="地址">
	      </el-table-column>
	    </el-table>
  </div>
  
</template>

<script>
  export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
</script>
<style scoped lang="scss">

</style>

代码中template之下放了两个DiV,换成一个就好了。代码如下:

<template>
	<div> <!--   添加一个外围 div-->
		  <div >	  
			sdfsdfjsdaklfjasldf
		  </div>
		  <div>
			  <el-table
				  :data="tableData"
				  style="width: 100%">
				  <el-table-column
					prop="date"
					label="日期"
					width="180">
				  </el-table-column>
				  <el-table-column
					prop="name"
					label="姓名"
					width="180">
				  </el-table-column>
				  <el-table-column
					prop="address"
					label="地址">
				  </el-table-column>
				</el-table>
		  </div>
  </div><!-- end for   添加一个外围 div-->
</template>

<script>
  export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
</script>
<style scoped lang="scss">

</style>

运行效果如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值