ElementPlus怎么修改表格行和單元格樣式

這篇文章主要介紹“ElementPlus怎么修改表格行和單元格樣式”，在日常操作中，相信很多人在ElementPlus怎么修改表格行和單元格樣式問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”ElementPlus怎么修改表格行和單元格樣式”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

先來一下基礎配置。(Vue3)

<template>
  <el-table :data="tableData" border >
    <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: "赤藍紫",
    age: 21,
    job: "Coder",
  },
];
</script>

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

設置某一行的樣式

主要是通過 row-style屬性來實現。它是行的 style的回調方法，可以通過它來實現設置某一行的樣式。

先讓我們來體驗一下它的參數都是些什么。

<el-table 
   
  border 
  :data="tableData" 
  :row-
>
</el-table>

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

可以發現，它是一個對象，一個屬性是行的數據，一個是行號(從0開始)，至于不只是打印3次，而是打印9次的原因還沒發現，后面單元格的會打印18次，9個單元格打印18次。但是這個并不是本次的研究重點。

那么，我們怎樣能設置樣式呢？

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

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

然后在搭配參數使用，就能實現根據表格內容設置行的樣式。

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

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

設置某一個單元格的樣式

通過 cell-style屬性來實現。做法和上面一樣，就不多說了，主要的四個參數 row, column, rowIndex, columnIndex。

• row：行的信息

• column：列的信息

• rowIndex： 行數(0開始算)

• columnIndex：列數(0開始算)

<el-table 
   
  border 
  :data="tableData" 
  :cell-
>
</el-table>

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

其實，cell-state不只是能設置單元格的樣式，因為它的參數中含有 row和 column，所以還可以用來設置某一行或某一列的樣式。

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

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

}

注意，這里重疊的地方并不會出現后來的樣式覆蓋掉前面的樣式，而是先到先得

表頭樣式修改(贈品)

特殊的表頭，特殊的處理

header-row-style：只有一個rowIndex屬性

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

發現只有標頭的行高有所變化，這是為啥呢？

檢查樣式發現，這是因為單元格本身具有背景顏色，所以并不會生效。

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

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

也可以通過column屬性來設置符合條件的表頭單元格的樣式。

const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {

  if (column.label === '姓名') {
    return {
      backgroundColor: 'red'
    }
  }
}

到此，關于“ElementPlus怎么修改表格行和單元格樣式”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！