Element?Plus修改表格行和單元格樣式詳解

更新時(shí)間：2022年04月29日 11:54:58 作者：赤藍(lán)紫

在使用Element Plus中的table組件展示數(shù)據(jù)時(shí),由于需要對(duì)表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進(jìn)行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下

前言

實(shí)習(xí)工作需要根據(jù)表格的狀態(tài)字段來(lái)設(shè)置行的樣式，記錄一波。

先來(lái)一下基礎(chǔ)配置。(Vue3)

<template>
  <el-table :data="tableData" border style="width: 400px">
    <el-table-column prop="name" label="姓名" width="100" />
    <el-table-column prop="age" label="年齡" width="100" />
    <el-table-column prop="job" label="工作" />
  </el-table>
</template>

<script setup>
const tableData = [
  {
    name: "clz",
    age: 21,
    job: "Coder",
  },
  {
    name: "czh",
    age: 21,
    job: "Coder",
  },
  {
    name: "赤藍(lán)紫",
    age: 21,
    job: "Coder",
  },
];
</script>

<style lang="less" scoped>
</style>

設(shè)置某一行的樣式

主要是通過(guò) row-style屬性來(lái)實(shí)現(xiàn)。它是行的 style的回調(diào)方法，可以通過(guò)它來(lái)實(shí)現(xiàn)設(shè)置某一行的樣式。

先讓我們來(lái)體驗(yàn)一下它的參數(shù)都是些什么。

<el-table 
  style="width: 400px" 
  border 
  :data="tableData" 
  :row-style="rowState"
>
</el-table>

const rowState = (arg) => {
  console.log(arg)
}

可以發(fā)現(xiàn)，它是一個(gè)對(duì)象，一個(gè)屬性是行的數(shù)據(jù)，一個(gè)是行號(hào)(從0開(kāi)始)，至于不只是打印3次，而是打印9次的原因還沒(méi)發(fā)現(xiàn)，后面單元格的會(huì)打印18次，9個(gè)單元格打印18次。但是這個(gè)并不是本次的研究重點(diǎn)。

那么，我們?cè)鯓幽茉O(shè)置樣式呢？

只需要返回含有屬性樣式的對(duì)象即可。(駝峰命名法)

const rowState = (arg) => {
  return {
    backgroundColor: 'pink',
    color: '#fff'
  }
}

然后在搭配參數(shù)使用，就能實(shí)現(xiàn)根據(jù)表格內(nèi)容設(shè)置行的樣式。

const rowState = ({ row }) => {
  let style = {}

  switch (row.name) {
    case 'clz':
      style = {
        backgroundColor: 'red'
      }
      break;
    case 'czh':
      style = {
        backgroundColor: 'blue'
      }
      break;
    case '赤藍(lán)紫':
      style = {
        backgroundColor: 'purple'
      }
      break;
  }
  return style;
}

設(shè)置某一個(gè)單元格的樣式

通過(guò) cell-style屬性來(lái)實(shí)現(xiàn)。做法和上面一樣，就不多說(shuō)了，主要的四個(gè)參數(shù) row, column, rowIndex, columnIndex。

row：行的信息
column：列的信息
rowIndex：行數(shù)(0開(kāi)始算)
columnIndex：列數(shù)(0開(kāi)始算)

<el-table 
  style="width: 400px" 
  border 
  :data="tableData" 
  :cell-style="cellStyle"
>
</el-table>

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 1 && columnIndex === 1) {
    return {
      backgroundColor: 'pink'
    }
  }
}

其實(shí)，cell-state不只是能設(shè)置單元格的樣式，因?yàn)樗膮?shù)中含有 row和 column，所以還可以用來(lái)設(shè)置某一行或某一列的樣式。

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.label === '工作') {
    return {
      backgroundColor: 'purple'
    }
  }

  if (row.name === '赤藍(lán)紫') {
    return {
      backgroundColor: 'red'
    }
  }

}

注意，這里重疊的地方并不會(huì)出現(xiàn)后來(lái)的樣式覆蓋掉前面的樣式，而是先到先得

表頭樣式修改(贈(zèng)品)

特殊的表頭，特殊的處理

header-row-style：只有一個(gè)rowIndex屬性

const headerRowStyle = (args) => {
  console.log(args)
  return {
    height: '100px',
    backgroundColor: 'red'
  }
}

發(fā)現(xiàn)只有標(biāo)頭的行高有所變化，這是為啥呢？

檢查樣式發(fā)現(xiàn)，這是因?yàn)閱卧癖旧砭哂斜尘邦伾?，所以并不?huì)生效。

header-row-style：和正常的單元格一樣，有四個(gè)屬性

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 1) {
    return {
      backgroundColor: 'pink'
    }
  }
}

也可以通過(guò)column屬性來(lái)設(shè)置符合條件的表頭單元格的樣式。

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
?
  if (column.label === '姓名') {
    return {
      backgroundColor: 'red'
    }
  }
}