设置ElementUI表格只能单选效果教程

Myth丶恋晨 2021-09-08 03:20 601阅读 0赞

> Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型.

设置样式隐藏表格上面总的选框

thead .el-table-column--selection .cell{ 
        display: none;
    }

![在这里插入图片描述][20210602110242734.png]

table加上`@selection-change="handleSelectionChange"`，ref设置个Table作为ref引用

<el-table ref="Table" :data="apprItemData" :header-cell-style="headClass" @selection-change="handleSelectionChange" row-key="apprItem" :tree-props="{children: 'children'}" height="420" border>
    </el-table>

methods加上方法：

handleSelectionChange(val){ 
    	console.log("selection rows:"+val);
         if (val.length > 1) { 
             this.$refs.Table.clearSelection()
             this.$refs.Table.toggleRowSelection(val.pop())
         }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]

[20210602110242734.png]: /images/20210813/6589f037472f4f64bf46402e1f6c1f6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0MjczOTE_size_16_color_FFFFFF_t_70]: /images/20210813/3aa39ea9e8b64e6b928df088d7a341ff.png

发表评论取消回复

表情：

评论列表（有 0 条评论，601人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui checkbox设置只能单选

HTML代码： <fieldset style="border:1px solid 2779aa;height:190px;width:100px;margin

野性酷女/ 2023年10月18日 14:17/ 0 赞/ 115 阅读

相关 el-checkbox 控制只能单选

情况1：只有两个多选框 <el-checkbox-group v-model="form.checkState"> <el-checkbox f

ゝ一纸荒年。/ 2023年06月19日 07:30/ 0 赞/ 848 阅读

相关 elementUI table多选设置默认勾选

![20200914172226137.png_pic_center][] <el-table ref="multipleTableClinicRoo

刺骨的言语ヽ痛彻心扉/ 2022年10月16日 00:49/ 0 赞/ 469 阅读

相关 element表格单选

<el-table :data="gridData" border @row-click="showRow"> <el-table-column label

喜欢ヅ旅行/ 2022年10月15日 12:59/ 0 赞/ 178 阅读

相关 js控制复选框checkbox 只能单选

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=utf

落日映苍穹つ/ 2022年10月02日 15:52/ 0 赞/ 259 阅读

相关 JavaScript实现多个checkbox只能单选和多选

checkbox单选 : $(':checkbox[name=bizType]').each(function(){

川长思鸟来/ 2022年08月10日 12:45/ 0 赞/ 216 阅读

相关 element ui 表格设置单选按钮

第一列添加： <el-table-column label="" width="50"> <template scope=

深碍√TFBOYSˉ_/ 2022年06月11日 08:06/ 0 赞/ 312 阅读

相关 ElementUI实现表格列表分页效果教程

ElementUI实现表格列表分页效果教程 > Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue

小鱼儿/ 2021年09月08日 03:24/ 0 赞/ 609 阅读

相关设置ElementUI表格只能单选效果教程

> Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站

Myth丶恋晨/ 2021年09月08日 03:20/ 0 赞/ 602 阅读

相关 element-ui的table表格实现单选效果

效果图 ![在这里插入图片描述][20200718112856622.gif] 安装Element-ui npm i element-ui -S 引入

布满荆棘的人生/ 2021年09月01日 07:31/ 0 赞/ 598 阅读