element table 单选按钮

Element el-table实现单选操作

 

https://juejin.cn/post/6844904073498460174

 https://juejin.cn/post/7021803438392475662

 
可以用｛｛｀｀｝｝代替 
用  或者 ‘’ 代替lable 的话，el-radio__label 会占用空间，导致radio不居中。
如果有这个需求，可以 给 el-radio__label display: none

 

 

2020-02-2718,129阅读1分钟

 

在使用el-table实现选择操作的时候，官方提供了一种多选功能，将type设置为selection。而有时候因项目需求，需要进行单选操作，接下来通过一个简单的例子，实现el-table表格单选操作。显然要实现单选，需要用el-radio标签来实现，代码如下：

 

复制代码

<el-table
   ref="multipleTable"
   :data="tableData"
   :header-cell-style="{background:'#F8F8F9'}"
   style="width: 100%;margin-top: 20px">
   <el-table-column label="选择" align="center" width="65">
     <template scope="scope">
       <el-radio :label="scope.$index" v-model="radio"
                 @change.native="getCurrentRow(scope.row)"></el-radio>
     </template>
   </el-table-column>
   <el-table-column align="center" label="编号" width="160" prop="studentCode"></el-table-column>
   <el-table-column align="center" prop="name" label="姓名" width="120"></el-table-column>
   <el-table-column align="center" prop="phone" label="账号"></el-table-column>
 </el-table>

在使用el-radio标签的时候，需要绑定label的值，这里label我绑定的是index，有时候在单选位置是不需要将label的值显示出来，这个时候只需要在el-radio标签里面加上'&nbsp ;'即可。

 

复制代码

<el-radio   :label="scope.$index" 
            v-model="radio"
            @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>

js代码实现如下：

 

复制代码

data: {
    return() {
        templateSelection: {}，
        radio: '',
        tableData: []
    }
}
methods: {
    getCurrentRow(row){ 
        // 获取选中数据   row表示选中这一行的数据，可以从里面提取所需要的值
        this.templateSelection = row
    }
}

效果图如下：

 

以上就是在Vue中使用el-table实现单选操作！

 

 

 

 

、--------------------------

 

 

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

A李士元

2021-10-227,946阅读1分钟

 

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

需求效果：

方法一：

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

 

ini

复制代码

<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

 

ini

复制代码

 <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>