element-ui 表格單選,高亮,頁面跳轉後保持高亮
1:element-ui表格高亮預設顏色,在index.min.css中1855行,這裡我改動了一下:
.el-table__body tr.current-row > td {- /* background: #edf7ff; */
- background: #20a0ff;
- color: #ffffff;
<el-table v-if="supplierList.length>0" ref="supplierTable" :data="supplierList" highlight-current-row border @current-change=3:業務"handleSupplierChange" style="width: 100%;border-left: 1px solid #eeeeee"> <el-table-column align="center" label="選擇"> <template scope="scope"> <el-radio v-model="supplierRadio" :label="scope.row.supplierNo">{{null}}</el-radio> </template></el-table-column> <el-table-column align="center" prop="supplierNo" label="供應商編號"> </el-table-column> <el-table-column align="center" prop="name" label="供應商名稱" > </el-table-column> </el-table>
supplierModal: function () {//這裡是獲取資料,然後呼叫回顯高亮的方法 this.selectedSupplier = null; this.supplierPageCur = 1; var res = useAjax($url.findSupplierList, { token: getToken(), pageNum: 1, pageSize: 15, supplierNo: "", name: "" }); if (res.data.content) { this.supplierList = res.data.content; this.supplierTotalPages = res.data.totalPages; this.supplierTotalElements = res.data.totalElements; this.highlight();//獲取到資料,呼叫回顯高亮方法 } else { this.supplierList = []; } }, supplierPaging: function (pageCur) {//此處為分頁方法,分頁成功,呼叫回顯高亮方法 if (pageCur > this.supplierTotalPages || pageCur < 1) return; this.supplierPageCur = pageCur; var res = useAjax($url.findSupplierList, { token: getToken(), pageNum: pageCur, pageSize: 15, supplierNo: this.selectSupplierType === 0 ? this.searchSupplierVal : "", name: this.selectSupplierType === 1 ? this.searchSupplierVal : "" }); if (res.data.content) { this.supplierList = res.data.content; this.supplierTotalPages = res.data.totalPages; this.supplierTotalElements = res.data.totalElements; this.highlight(); } }, highlight: function () {//回顯高亮方法,根據已經選擇的id,呼叫 element-ui table的設定高亮方法 if (this.supplierRadio === "") return; for (var a = 0; a < this.supplierList.length; a++) { if (this.supplierList[a].supplierNo === this.supplierRadio) { this.$refs.supplierTable.setCurrentRow(this.supplierList[a]); } } },handleSupplierChange: function (supplier) {//點選表格行方法,主要獲取當前選擇的id if (!supplier) return; this.supplierRadio = supplier.supplierNo; this.selectedSupplier = supplier; },
相關推薦
element-ui 表格單選,高亮,頁面跳轉後保持高亮
1:element-ui表格高亮預設顏色,在index.min.css中1855行,這裡我改動了一下: .el-table__body tr.current-row > td {
Element-ui radio單選框
element-ui單選框 <el-radio v-model="" label="0">0</el-radio> element-ui單選框可以繫結string/number/boolean型別的資料 如果需要繫結數值,需要在label前加上:,像這
element ui 表格全選與否
<script> export default { data() { return { // 表格資料 tableData: [ { userCode: '8511110101', name: '王1虎',roo
利用cookie,實現刷新頁面跳轉,左側菜單點擊後狀態保持不變。
coo spl 失效 不變 find sco a標簽 左側菜單 cookie 是一個後臺關系系統,後臺是phyton,後臺把左側菜單都是利用a標簽進行跳轉,導致菜單點擊狀態在頁面刷新後失效,用戶體驗不好,被要求改掉。 查了一些資料。利用cookie終於搞定了這個大問題。主要
點選iframe子框架後的頁面跳轉後出現欄目巢狀問題
今天在搭建一個全新後臺的時候,用的iframe框架巢狀的子頁面,當點選子iframe框架上的連結時候,出現了頁面巢狀混亂,如圖 這樣顯然格式是不正確的,百度了一下,只需要修改兩個屬性 (1)在標
swift UI專項訓練42 用Swift程式碼實現頁面跳轉與傳值
之前我們做過如果要點選一個按鈕實現跳轉到另一個按鈕的辦法,有時候我們需要通過一些動作來觸發頁面的跳轉,比如搖動手機,這樣就不能直接用連線的辦法來實現跳轉了,那麼如何通過程式碼的方式來實現跳轉呢?依舊使用過渡的方法,在storyboard中把要實現跳轉的兩張頁面連線,注
TableViewCell 裡面嵌的TableViewCell 如何點選裡面的TableViewCell進行頁面跳轉?
下面是裡面TableView的程式碼 #import "ClassViewCell.h" #import "MyCollectionCell.h" #import "StringManager.h" #import "HomeViewController.h" #impor
JSP中頁面跳轉後獲取表單資訊的方法述用到(hidden)(session)
假設現在有三個頁面分別是test1.jsp,test2.jsp,test3.jsp 在test1.jsp頁面中填寫名字username資訊 在test2.jsp頁面中填寫興趣愛好amuse資訊 頁面從test1.jsp中以表單形式跳轉到test2.jsp中,繼續以表單形
使用Ext JS,不要使用頁面做元件重用,儘量不要做頁面跳轉
今天,有人請教我處理辦法,問題是:一個Grid,選擇某條記錄後,單擊編輯後,彈出編輯視窗(帶編輯表單),編輯完成後單擊儲存按鈕儲存表單,並關閉視窗,重新整理Grid。這,本來是很簡單的,但囿於開發人員對Ext JS的理解不到位,搞得相當的複雜了。主要複雜的地方在以下幾點:為了
android如何在頁面跳轉後,讓使用者不能通過返回鍵回到原頁面
Intent intent=new Intent(ActivityA.this,ActivityB.class); startActivity(intent); ActivityA.this.finish(); 順便,遮蔽返回鍵的方法: @Override
Android 如何保證App切換到後臺,或頁面跳轉後,重新開啟APP、或返回之前頁面時,維持其狀態不變
專案中遇到的一些小問題,記錄、分享一下。 Android 如何保證App切換到後臺,或頁面跳轉後,重新開啟APP、或返回之前頁面時,維持其頁面狀態不變? 1、問:當APP啟動後,開啟某一介面,然後點選手機HOME鍵,使應用程式退到後臺;當再次開啟App時,如何保證
前後端分離場景下,ajax 如何控制頁面跳轉
在實際的應用中,前後端分離越來越常見,前端負責頁面之間的路由,需要資料時,傳送ajax請求就可以了。但是我希望在使用ajax時候,可以控制頁面的跳轉,怎麼辦呢? 有兩種情況 第一種情況,傳送同步的請求,成功返回後,在回撥函式中使用window.locatin
關於Element-ui的多選框,單選框無法選中的問題
最近先放一下物聯網的事情,打算開發一個前端的SPA。 類似於問卷星的一個東西,因為現在大學,填表的需求很高,可是卻沒有合適的軟體,打算自己做個網站。 前端就選擇用Vue和Element-UI開發了,可是在使用的過程中出現了很多錯誤,浪費了很長時間,也讓我
element-ui 表格列動態展示,排序錯亂問題
<el-table :data="tableData" border stripe style="width: 100%;background:white;" > <el-table-column key="1"
如何改裝element-ui表格,使之擁有增加和刪除功能成為動態表格
最近專案需要使用一個動態表格,使之擁有增加刪除以及大表單的儲存功能,介面框架定的是element-ui,仔細找了找,並沒有現成的動態表格可以使用,沒辦法,只能開啟改裝之路。我的思路是這樣的,就是在拿到後臺資料時,在末尾在加上一個標記空陣列,使
頁面刷新跳轉後,導航欄高亮顯示跳轉前的點擊位置
欄目 storage 加載 null 隱藏 nload 二級 date split 需求:比如有一個二級或三四級的菜單欄,頁面不跳轉時實現高亮顯示是很容易的,網上有很多這樣的素材。但是頁面一跳轉,新頁面可就記不住你在上一個頁面點擊的位置了,也就不可能高亮顯示。並且很多時候,
多選ui實現單選效果
click oat html script 20px width false min mar <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh
Element-UI 表格 列過多內容換行問題
targe entry logs hle .html 方法 發現 blank align 本文地址:http://www.cnblogs.com/veinyin/p/8487098.html 一般表格不會有很多列,所以在使用時會很方便,但是如果有25+個列時,就會發現
vue Element-ui 表格自帶篩選框自定義高度
image n-k pre chrome code lac 分享 sso spa el-table中可以在一行的某列進行篩選,代碼如下: <el-table-column prop="classOfTest" class="test" label="測試類名" :
(vue.js)element ui 表單重置
pro too DG cef service widget 一個 方法 model el-form需要接收一個model,並且需要配合el-form-item一起使用,並且在el-form-item上綁定prop屬性,resetField方法才能好使。 <el-