el-radio單選框,取消選中

1.背景:在公司開發需求中有一個選擇顏色的單選框(黑色,白色),每種顏色選擇后均支持取消選中,可是el-radio標簽不支持取消選中。

2.解決:

方法1:?

<el-radio-group v-model="radioColor"><el-radio :label="'black'" @click.native.prevent="clickitemdataType('black')">黑色</el-radio><el-radio :label="'white'" @click.native.prevent="clickitemdataType('white')">白色</el-radio>
</el-radio-group>clickitemdataType (e) { // e為radio的label值e === this.radioColor ? this.radioColor = '' : this.radioColor = e},

方法2:換checkbox,設置max=1即可

<el-checkbox-group v-model="checkList" :max="1"><el-checkbox label="A"></el-checkbox><el-checkbox label="B"></el-checkbox>
</el-checkbox-group>data () {return {checkList: ['A']}
}

但是用第一個方法會導致樣式錯亂,需要在css中加入

/deep/ .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
box-shadow: 0 0 2px 2px #fff !important;
}

這樣就會好了!

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/35260.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/35260.shtml
英文地址,請注明出處:http://en.pswp.cn/news/35260.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【Apollo】自動駕駛的平臺背景,平臺介紹

作者簡介&#xff1a; 辭七七&#xff0c;目前大一&#xff0c;正在學習C/C&#xff0c;Java&#xff0c;Python等 作者主頁&#xff1a; 七七的個人主頁 文章收錄專欄&#xff1a; 七七的閑談 歡迎大家點贊 &#x1f44d; 收藏 ? 加關注哦&#xff01;&#x1f496;&#x1f…

spring boot 集成 jetcache【基礎篇:@Cached、@CreateCache、@CacheRefresh】

手打不易&#xff0c;如果轉摘&#xff0c;請注明出處&#xff01; 注明原文&#xff1a;https://zhangxiaofan.blog.csdn.net/article/details/129832925 目錄 前言 版本 配置通用說明 項目結構 代碼 啟動類 實體類 基礎使用——增刪改查&#xff08;Cached、CacheInv…

opencv實戰項目 手勢識別-手勢控制鍵盤

手勢識別是一種人機交互技術&#xff0c;通過識別人的手勢動作&#xff0c;從而實現對計算機、智能手機、智能電視等設備的操作和控制。 1. opencv實現手部追蹤&#xff08;定位手部關鍵點&#xff09; 2.opencv實戰項目 實現手勢跟蹤并返回位置信息&#xff08;封裝調用&am…

虛擬機安裝 Ubuntu桌面版,宿主機無法訪問虛擬機 ufw 防火墻簡單使用

虛擬機安裝 Ubuntu桌面版&#xff0c;宿主機無法訪問虛擬機 問題處理安裝ssh服務ufw防火墻 放行ssh服務ufw 常用命令 問題 本次安裝使用的 ubuntu-22.04.2-desktop-amd64 &#xff0c;網絡連接使用的是橋接&#xff0c;查看ubuntu的ip是正常的&#xff0c;與宿主機在同一個網段…

力扣的板子

板子 線性篩法求質因子的板子快速冪 線性篩法求質因子的板子 int limit 100000; //修改為題目中的數字的上限 bool isprime[100005] {0}; //保存所有1~limit中的數字是不是質數 int myprime[100005] {0}; //保存2~limit中所有數字的最小質因子 int primes[100000] {0}; …

airflow是什么

Airflow 簡介 Airflow是一個基于有向無環圖(DAG)的可編程、調度和監控的工作流平臺&#xff0c;它可以定義一組有依賴的任務&#xff0c;按照依賴依次執行。airflow提供了豐富的命令行工具用于系統管控&#xff0c;而其web管理界面同樣也可以方便的管控調度任務&#xff0c;并…

Lua 閉包

一、Lua 中的函數 Lua 中的函數是第一類值。意味著和其他的常見類型的值&#xff08;例如數值和字符串&#xff09;具有同等權限。 舉個例子&#xff0c;函數也可以像其他類型一樣存儲起來&#xff0c;然后調用 -- 將 a.p 指向 print 函數 a { p print } -- 使用 a.p 函數…

(原創)Flutter與Native頁面互相跳轉

前言 實際開發混合項目時&#xff0c;常常會有頁面跳轉的需求 如果是原生界面和flutter界面需要互相跳轉 這種情況應該怎么處理呢&#xff1f; 今天這篇博客主要就來介紹下這個情況 其實想一下&#xff0c;這個問題可以拆成四個小的問題來分析&#xff1a; 1&#xff1a;原生界…

什么是全局代理,手機怎么設置全局代理

目錄 什么是全局代理 全局代理的優缺點 優點 缺點 手機怎么設置全局代理 注意事項 總結 在計算機網絡和信息安全中&#xff0c;全局代理是一種常用的技術手段&#xff0c;用于將網絡流量通過代理服務器進行轉發和處理。本文將介紹什么是全局代理&#xff0c;探討全局代理…

pyspark筆記 pyspark.sql.functions

col qqpyspark 筆記 pyspark.sql.function col VS select_UQI-LIUWJ的博客-CSDN博客 取某一列 lit 創建一個包含指定值的列 date_trunc 將日期截取成由第一個參數指定的字符串值 year, yyyy, yy——截取到年month,mon,mm——截取到月day,dd ——截取到天microsecondmillis…

SpringBoot WebSocket配合react 使用消息通信

引入websocket依賴 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>配置websocket import org.springframework.context.annotation.Bean; import org.spr…

Highcharts引入

Highcharts是和jQuery一起使用的&#xff0c;所以需要下載好jQuery jQuery下載方式&#xff1a;訪問&#xff1a;http://cdn.staticfile.org/jquery/2.1.4/jquery.min.js&#xff0c;然后全選復制到自己新建的txt文檔中&#xff0c;最后把擴展名改為js。 Highcharts下載方式&…

pytest運行時參數說明,pytest詳解,pytest.ini詳解

一、Pytest簡介 1.pytest是一個非常成熟的全功能的Python測試框架&#xff0c;主要有一下幾個特點&#xff1a; 簡單靈活&#xff0c;容易上手&#xff0c;支持參數化 2.能夠支持簡單的單元測試和復雜的功能測試&#xff0c;還可以用來做selenium、appium等自動化測試&#xf…

使用sqlplus連接oracle,提示ORA-01034和ORA-27101

具體內容如下 PL/SQL Developer 處 登錄時 終端處 登錄時 ERROR: ORA-01034: ORACLE not available ORA-27101: shared memory realm does not exist Process ID: 0 Session ID: 0 Serial number: 0 解決方法是執行以下命令 sqlplus /nolog conn / as sysdba startup …

【Hilog】鴻蒙系統日志源碼分析

【Hilog】鴻蒙系統日志源碼分析 Hilog采用C/S結構&#xff0c;Hilogd作為服務端提供日志功能。Client端通過API調用&#xff08;最終通過socket通訊&#xff09;與HiLogd打交道。簡易Block圖如下。 這里主要分析一下。Hilog的讀、寫、壓縮落盤&#xff0c;以及higlog與android…

學術論文GPT源碼解讀:從chatpaper、chatwithpaper到gpt_academic

前言 之前7月中旬&#xff0c;我曾在微博上說準備做“20個LLM大型項目的源碼解讀” 針對這個事&#xff0c;目前的最新情況是 已經做了的&#xff1a;LLaMA、Alpaca、ChatGLM-6B、deepspeedchat、transformer、langchain、langchain-chatglm知識庫準備做的&#xff1a;chatpa…

GitHub上受歡迎的Android UI Library

內容 抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新ViewPager圖表(Chart)菜單(Menu)浮動菜單對話框空白頁滑動刪除手勢操作RecyclerViewCardColorDrawableSpinner布局模糊效果TabBarAppBar選擇器(Picker)跑馬燈日歷時間主題樣式ImageView通知聊…

chapter 1 formation of crystal, basic concepts

chapter 1 晶體的形成 1.1 Quantum Mechanics and atomic structure 1.1.1 Old Quantum Theory problems of planetary model: atom would be unstableradiate EM wave of continuous frequency to solve the prablom of planetary model: Bohr: Quantum atomic structureP…

React 實現文件分片上傳和下載

React 實現文件分片上傳和下載 在開發中&#xff0c;文件的上傳和下載是常見的需求。然而&#xff0c;當面對大型文件時&#xff0c;直接的上傳和下載方式可能會遇到一些問題&#xff0c;比如網絡傳輸不穩定、文件過大導致傳輸時間過長等等。為了解決這些問題&#xff0c;我們…

Vue中自定義.js變量

1、定義.js文件 order.js文件內容&#xff1a; // 訂單是否報賬 const EXPENESS_STATUS_NO0; const EXPENESS_STATUS_YES1; // 狀態 0-未發貨 1-發貨 2-確認收獲 const STATUS_NO0; const STATUS_SEND1; const STATUS_DELIVERY2; // 如何不加這個&#xff0c;vue中引…