table 左對(duì)齊

<el-table:header-cell-style="{'text-align':'left'}":cell-style="{'text-align':'left'}">

table表格內(nèi)容過長時(shí)顯示省略號(hào),并且鼠標(biāo)懸停時(shí)顯示全部信息

<el-table-columnproperty="deviceIn":show-overflow-tooltip="true"label="進(jìn)門設(shè)備標(biāo)識(shí)"> </el-table-column>

table多選時(shí),需要disabled某些選項(xiàng)

<el-table-columnalign="center"type="selection":selectable="checkSelect"width="55"> </el-table-column> /*** methods里面* row：當(dāng)前行數(shù)據(jù)* index：當(dāng)前第幾位*/checkSelect (row,index) {let isChecked = true;if (row.dealerName === null) { // 判斷里面是否存在某個(gè)參數(shù)isChecked = true} else {isChecked = false}return isChecked},

table的分頁信息靠右

<div style="display: flex;justify-content: flex-end;;margin-top: 10px"> <el-paginationbackground@size-change="sizeChangeOfLoss"@current-change="currentChangeOfLoss"layout="sizes,prev, pager, next,total":current-page="pageOfLoss":page-size="sizeOfLoss":total="totalOfLoss"> </el-pagination>

本身翻頁時(shí)，序號(hào)永遠(yuǎn)都是從 1 開始，自定義序號(hào)，切換頁碼時(shí)，第一頁為1-10，第二頁就是11-20

--- table表序號(hào)列 <el-table-columnlabel="序號(hào)"type="index"width="50"><template slot-scope="scope"><span>{{scope.$index+(page - 1) * size + 1}} </span></template> </el-table-column> //解決多條記錄,刷新數(shù)據(jù)時(shí),序號(hào)不歸1 refreshData() {this.initPage();this.initData(); }, //初始化page initPage() {this.total = 0;this.page = 1;this.size = 10; }, //初始化數(shù)據(jù)方法 initData() {this.loading = true;this.getRequest('/card/stu?page=' + this.page + '&size=' + this.size).then(resp => {this.total = resp.total;this.tableData = resp.list;this.loading = false;}) },

去除elementUI表格鼠標(biāo)移入背景色

html部分

<div class="group"><el-table></el-table> </div>

css部分

// transparent表示透明效果。 <style> .group > .el-table--enable-row-hover .el-table__body tr:hover > td {background-color: transparent !important; } </style>

表格_合并列

官網(wǎng)提供的是最基礎(chǔ)的用法，在實(shí)際需求中多數(shù)需要從后臺(tái)拿數(shù)據(jù)對(duì)某個(gè)相同的列進(jìn)行合并。

<el-table...:span-method="objectSpanMethod"...> </el-table>

這里注意:每次刷新table的時(shí)候也需要將合并列的記錄 重新初始化,如下(代碼中分頁方法):
this.spanArr = [];
this.pos = ‘’;

data() {return {...tableData:[],//表格數(shù)據(jù)spanArr: [],//一個(gè)空的數(shù)組，用于存放每一行記錄的合并數(shù)pos:'', //pos是spanArr的索引,需要合并行下標(biāo)... }, mounted() {...this.initData();... }, methods: {//初始化數(shù)據(jù)initData() {this.getRequest("/url......" ).then(resp => {if (resp) {this.total = resp.total;//分頁this.tableData = resp.list;//數(shù)據(jù)this.getSpanArr(this.tableData);}})},/*合并列 begin*/getSpanArr(data) {// data就是我們從后臺(tái)拿到的數(shù)據(jù)for (let i = 0; i < data.length; i++) {//如果是第一條記錄（索引為０），向數(shù)組中加入１，并設(shè)置索引位置if (i === 0) {this.spanArr.push(1);this.pos = 0;//spanArr的索引} else {//如果不是第一條記錄，則判斷它與前一條記錄是否相等//根據(jù)相同 扣分類別名稱 進(jìn)行合并,根據(jù)需要可進(jìn)行修改if (data[i].proName === data[i - 1].proName) {//如果相等，則向spanArr中添入元素0，并將前一位元素＋１，表示合并行數(shù)＋１this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}}},objectSpanMethod({row, column, rowIndex, columnIndex}) {if (columnIndex === 2) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {// [0,0] 表示這一行不顯示， [2,1]表示行的合并數(shù)rowspan: _row,colspan: _col};}},/*合并列 end*///選頁sizeChange(currentSize) {this.page = 1;this.size = currentSize;this.spanArr = [];//用于存放每一行記錄的合并數(shù)this.pos = '';//spanArr下標(biāo)this.initData();},currentChange(currentPage) {this.size = 10;this.page = currentPage;this.spanArr = [];//用于存放每一行記錄的合并數(shù)this.pos = '';//spanArr下標(biāo)this.initData();}, }

總結(jié)

以上是生活随笔為你收集整理的element UI (table表格)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。