效果如下

代碼如下文章來源地址http://www.zghlxwxcb.cn/news/detail-699566.html

<template>
  <h2>表格自定義樣式</h2>
  <div style="background-color: cadetblue; height: 600px;">
    <div class="regulaContainer">

      <el-table ref="tableRef" :data="tableData" border style="width: 100%" highlight-current-row height="400"
        :cell-style="rowStyleClass">
        <el-table-column type="index" label="序號(hào)" width="100" />
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>

    </div>
  </div>
</template>

<script lang="ts" setup >
import { getCurrentInstance, onMounted, reactive, ref, inject } from 'vue'

const install = getCurrentInstance();
const tableRef = ref();
const tableData = reactive<any>([])

onMounted(() => {
  for (let i = 0; i < 5; i++) {
    let obj = {
      date: '2016-05-01',
      name: 'Tom' + i,
      address: 'No. 189, Grove St, Los Angeles',
      color_index: i
    }
    tableData.push(obj);
  }


})

function rowStyleClass(row) {
  console.log(row.rowIndex)
  let style = {};

  if (row.rowIndex % 2) {
    style = {
      color: '#fff',
      borderBottom: "1px solid #EBEEF588",
      //background: '#065D5F !important'
    };

    return style;
  }
  else {
    style = {
      color: '#fff',
      borderBottom: "1px solid #EBEEF588",
      //background: '#065D5F !important'
    };

    return style;
  }
}

</script> 


<style>
.regulaContainer {
  background-color: cadetblue;
}

/* 表格整體背景色 */
.regulaContainer .el-table,
.regulaContainer .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格最下面的線 */
.regulaContainer .el-table__inner-wrapper::before {
  height: 0px;
}

.regulaContainer .el-table td.el-table__cell,
.regulaContainer .el-table th.el-table__cell.is-leaf {
  border: 0px;
}

.regulaContainer .el-table thead {
  color: #fff;
  background-color: rgb(4, 151, 145);
  border: 0;
}

.regulaContainer .el-table th {
  background: transparent;
}

/* 表格內(nèi)tr背景色修改 */
.regulaContainer .el-table tr {
  background-color: transparent !important;
  border: 1px;
  /* 設(shè)置字體大小 */
  font-size: 16px;
  color: #fff;
}

/*表格內(nèi)td背景色修改*/
.regulaContainer .el-table td {
  background-color: transparent !important;
  border: 1px;
  /* 設(shè)置字體大小 */
  font-size: 16px;
  color: #fff;
}

.regulaContainer .current-row {
  /* 選中時(shí)的圖片顯示 */
  background: rgb(26, 46, 161);
  background-size: 100% 100% !important;
}

/* 用來設(shè)置當(dāng)前頁面element全局table 鼠標(biāo)移入某行時(shí)的背景色*/
.regulaContainer .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgb(60, 10, 175) !important;
  /* color: #f19944; */
  /* 設(shè)置文字顏色，可以選擇不設(shè)置 */
}
</style>

到了這里，關(guān)于element-plus 表格-自定義樣式實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！