elementUI Radio单选框小案例

Radio单选框改造成Tabs标签页

1.描述：

今天想做这个Tabs标签页功能，但是界面风格不一样，又不想深入底层修改他的样式，找了一个Radio+div替代。

2.案例

<div >
    <el-radio-group v-model="tabsRadio" size="small">
          <el-radio-button label="待处理"></el-radio-button>
           <el-radio-button label="跟进中"></el-radio-button>
           <el-radio-button label="已处理"></el-radio-button>
    </el-radio-group>
 </div>
<div v-show='tabsRadio'>
</div>

Radio单选框搭配Table表格使用

1.描述

因为其他的列数据大多一样，就操作这一栏改变了，所以想根据标签来选择操作显示的内容。

2.案例

<el-table-column
        label="操作"
		:key="tabsRadio"
        fixed="right"
        class="handle"
        v-if="!(tabsRadio === '已处理')">
</el-table-column>

3.注意

记得添加key防止表格复用造成表格数据不更新，还有这里我一开始是使用的是v-show，但是发现无效，查了原因发现是里边样式有display: table-cell，权重高于display：none,所以v-show失效。
v-show不能使用原因原文链接：link:https://www.yht7.com/news/109286