Weird VueJS Error with ElementUI Table: _self.$scopedSlots.default is not a function

Hello VueJS people.

I am having a strange issue with my VueJS application which involves the use of ElementUI tables.

In one of my components, I have two panels, which basically contains the same table structure:

<template>
<div>
    <div class="panel" v-if="firstTabActive">
      <div class="panel-heading has-text-left">
    	First Tab
      </div>

      <div class="panel-block">
    	<el-table v-bind:data="data1" style="width: 100%" height="500" 
    	  highlight-current-row border empty-text="...">
    	  <el-table-column type="selection" width="40" align="center" header-align="center">
    	  </el-table-column>
    	  <el-table-column width="80" align="center" header-align="center">
    		<template scope="scope">
    		  <button class="button is-info is-outlined" @click="viewData(scope.$index, scope.row)" title="View Details">
    			View
    		  </button>
    		</template>
    	  </el-table-column>
    	  <el-table-column prop="prop1" label="Column 1" width="100">
    	  </el-table-column>
    	  <el-table-column prop="prop2" label="Column 2" width="150">
    	  </el-table-column>
    	  <el-table-column prop="prop3" label="Column 3">
    	  </el-table-column>
    	  <el-table-column label="Column 4" align="center" header-align="center" width="90">
    		<template scope="scope">
    		  <el-checkbox disabled v-model="scope.row.prop4"></el-checkbox>
    		</template>
    	  </el-table-column>
    	  <el-table-column prop="prop5" label="Column 5" align="center" header-align="center" width="140">
    	  </el-table-column>
    	  <el-table-column prop="prop6" label="Column 6" align="right" header-align="right" width="130">
    	  </el-table-column>
    	  <el-table-column prop="prop7" label="Column 7" align="center" header-align="center" width="160">
    	  </el-table-column>
    	</el-table>
      </div>
    </div>

    <div class="panel" v-if="secondTabActive">
      <div class="panel-heading has-text-left">
    	Second Tab
      </div>

      <div class="panel-block">
    	<el-table v-bind:data="data1" style="width: 100%" height="500" 
    	  highlight-current-row border empty-text="...">
    	  <el-table-column type="selection" width="40" align="center" header-align="center">
    	  </el-table-column>
    	  <el-table-column width="80" align="center" header-align="center">
    		<template scope="scope">
    		  <button class="button is-info is-outlined" @click="viewData(scope.$index, scope.row)" title="Open Details">
    			View
    		  </button>
    		</template>
    	  </el-table-column>
    	  <el-table-column prop="prop1" label="Column 1" width="100">
    	  </el-table-column>
    	  <el-table-column prop="prop2" label="Column 2" width="150">
    	  </el-table-column>
    	  <el-table-column prop="prop3" label="Column 3">
    	  </el-table-column>
    	  <el-table-column label="Column 4" align="center" header-align="center" width="90">
    		<template scope="scope">
    		  <el-checkbox disabled v-model="scope.row.prop4"></el-checkbox>
    		</template>
    	  </el-table-column>
    	  <el-table-column prop="prop5" label="Column 5" align="center" header-align="center" width="140">
    	  </el-table-column>
    	  <el-table-column prop="prop6" label="Column 6" align="right" header-align="right" width="130">
    	  </el-table-column>
    	  <el-table-column prop="prop7" label="Column 7" align="center" header-align="center" width="160">
    	  </el-table-column>
    	</el-table>
      </div>
    </div>
    
    <button class="button is-info" @click="showTab('1')">
            Show First
        </button>
    <button class="button is-info" @click="showTab('2')">
            Show Second
        </button>
</div>
</template>

And here’s my script:

<script>
    export default {
    name: 'myApp',
    data: function() {
      return {
        firstTabActive: true,
       secondTabActive: false
      }
    },
    methods: {
      showTab: function(whichTab){
        this.firstTabActive = (whichTab == '1') ? true : false
        this.secondTabActive = (whichTab == '2') ? true : false
      }
    }
</script>

If I say, commented out, or removed one of the columns in the second table, I am getting an error in the console saying:

TypeError: _self.$scopedSlots.default is not a function

And then both the tables does not render anymore data. It basically breaks (No column headers, etc.). Although you could still see the number of rows, but basically no data is present.

Has anyone experienced the same issue? Running out of things to do to debug on my side.

Note that I am using the normal vue-cli stuff, with hot reload.

P.S.

  • If I try to make my second table have a different structure than my first one, then it also errors outright. So not really sure what to look out for.
  • Changing the data being bound to the table has no effect.
  • Additional Info: I found out that the second table just completely errors out, say if I come from another component and move to this component (page), the first table renders fine, but as soon as I hit on the button with the showTab method, the second table is displayed but there is no data displayed, and the same behavior goes to the other table when I switch back. At this stage, the console displays the error:

TypeError: _self.$scopedSlots.default is not a function
at renderCell (eval at (app.js:1425), :10386:45)

Thanks!

2 Likes

Have you solved this issue? I’m having the same exact problem.

I don’t have a complete explanation, but it seems using v-show instead of v-if resolved the issue for me.

<div class="panel" v-show="secondTabActive">

Did not really have much time to dig deeper, but it seems that changes worked across for me.

Hope this helps you in your issue.

4 Likes

you can add a key props to table like this:

<el-table key='aTable' v-if="firstTabActive"></el-table>

8 Likes

Why does it work?

It works, thanks.

1 Like

大神,您说的没错,我也遇到了相同的问题把v-if改成了v-show完美解决,希望对遇到同样错误的同胞有帮助噢

这个正解!:grinning::grinning::grinning::grinning::grinning:

It work to me 2

thanks,now it really succeed

为每个el-table加key,就好了:grinning: