1. 程式人生 > >element-ui 表格單選,高亮,頁面跳轉後保持高亮

element-ui 表格單選,高亮,頁面跳轉後保持高亮

1:element-ui表格高亮預設顏色,在index.min.css中1855行,這裡我改動了一下:

.el-table__body tr.current-row > td {
  1. /* background#edf7ff; */
  2. background#20a0ff;
  3. color#ffffff;
} 2:表格
<el-table
v-if="supplierList.length>0"
ref="supplierTable"
:data="supplierList"
highlight-current-row
        border
        @current-change=
"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>
3:業務
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-