el-table中实现单选按钮 两种方法

11,372 阅读1分钟

及element-ui 去除radio单选框 label文字

需求效果:

方法一:

思路:复选框 在js中控制 保证复选框数组中只有一项,借此实现单选。

<el-table        
    ref="multipleTable"        
    :data="tableTenderData"        
    tooltip-effect="dark"        
    style="width: 100%"        
    show-overflow-tooltip        
    @selection-change="handleSelectionChange"      
>        
    <el-table-column type="selection" width="55" label="选择"></el-table-column>        
    <el-table-column          
        type="index"          
        label="序号"          
        width="80"          
        align="center"        
    ></el-table-column>        
    <el-table-column          
        prop="data.projectCode"          
        label="项目编号"          
        width="200"          
        show-overflow-tooltip        
    ></el-table-column>        
    <el-table-column          
        prop="data.projectName"          
        label="项目名称"          
        show-overflow-tooltip        
    ></el-table-column>      
</el-table>

//被选中的信息 单选    
handleSelectionChange(val) {      
    if (val.length > 1) {        
        this.$refs.multipleTable.clearSelection();        
        this.$refs.multipleTable.toggleRowSelection(val.pop());      
    }      
    this.multipleSelection = val;      
    this.tenderProjectId = this.multipleSelection[0].data.projectId;    
},

效果图:

方法二:

思路:借助el-table中有个选中行的点击事件@row-click

 <el-table        
    ref="multipleTable"        
    :data="tableTenderData"        
    tooltip-effect="dark"        
    style="width: 100%"        
    show-overflow-tooltip        
    highlight-current-row         
    @row-click="rowClick"        
    stripe      
>        
    <el-table-column label="选择" width="55" align="center">          
        <template slot-scope="scope">              
            <el-radio 
                :label="scope.row.data.projectId" 
                v-model="tenderProjectId">{{ '' }}
            </el-radio>            
        </template>        
    </el-table-column>        
    <el-table-column          
        type="index"          
        label="序号"          
        width="80"          
        align="center"        
    ></el-table-column>        
    <el-table-column          
        prop="data.projectCode"          
        label="项目编号"          
        width="200"          
        show-overflow-tooltip        
    ></el-table-column>        
    <el-table-column          
        prop="data.projectName"          
        label="项目名称"          
        show-overflow-tooltip        
    ></el-table-column>      
</el-table>

// 选择项目 单选样式    
rowClick(val){      
    this.tenderProjectId = val.data.projectId;    
},

效果图:

ps:

element-ui 去除radio单选框 label文字

<el-radio :label="$index">{{ '' }}</el-radio>