element-ui中table,tag列显示隐藏复选框等

先说业务需求，是在一个用tag切换table内容，其中一个是有全部内容的，其他没有，也不让用复选框，要求就是只有要用复选的这个能用，起他不能，并且一开始复选框原来是隐藏的，点击按钮后才显示，不选点击在隐藏，到其他tag也是隐藏。这几个tag页面大致内容都是相同的所以是根据v-if判断是否在那个tag页面显示所以用的是一套代码。


在点击按钮后显示复选框

最开始的原代码就是用v-if判断是不是这个tag同时判断是否显示，发现到其他tag页面时，复选框还是显示，同时呢tag页面也是标题循序，以及内容乱掉了。
开始代码

 <el-table-column
        v-if="checkboxShow && activeIndex == 4"    
        type="selection"
        align="center"
        fixed="left"
      /> 

这个时候开始点击，显示隐藏并不会出错，就是切换到其他tag页就会出错
后面自己也是各大搜索引擎搜索，发现给的基本上都是:cell-class-name
发现并不行，还是v-if适用
后面就是发现先去解决他的循序乱的问题，这个时候需要我们加上key这个关键字，要和参数相同，才能保证循序不乱

<el-table-column
        key="work_id"
        label="工单编号"
        prop="work_id"
        align="center"
      />

这个时候解决了乱码问题，还差就是到其他页面隐藏问题，也是用最初的，发现并不能解决这个问题，然后自己想着是用template包裹一下

<template  v-if="checkboxShow">
        <el-table-column
        type="selection"
        align="center"
        fixed="left"
      />
      </template>

也是发现到其他tag页面并不能解决问题，还是显示复选框，愁人，然后就是开辟自己思路，抱着试试心态，把这部分内容放到一个组件中，发现最后可以了，算是完美解决

• 组件内容
• 根本不需要写其他内容，暂时想不出为什么这样就行，直接在table里面写template不行，单独拿出来就行

<template>
  <el-table-column type="selection" align="center" fixed="left" />
</template>

• 主文本内容

<CheckOut v-if="checkboxShow" />

切换tag内容函数就很简单的给赋值就行,只需要在tag切换函数中加入就行

this.checkboxShow = false

最后也是终于解决，还是休息日修改的bug
本文链接：点击
博主个人小博客：嘿嘿
如果感觉对你有帮助多多支持博主。嘻嘻

因为今天对这个业务有个从新的要求，发现，在用外部组件的时候不成功，在往里面传参数的时候传的只有一个，发现并不能满足业务需求（有些已经分配的工单就禁用）发现不能使用:selectable这个属性
自己也是想了半天，发现并不需要在另用组件了直接就是

<template v-if="checkboxShow">
  <el-table-column type="selection" align="center" width="50" :selectable="checkoutTex"/>
</template>

上面也写了，具体是什么原因自己也不是很清楚，不知道是不是忘记清除缓存了
抱歉，还是要加上key值的

<template v-if="checkboxShow">
  <el-table-column key="1" type="selection" align="center" width="50" :selectable="checkoutTex"/>
</template>