element-plus 表格-自定义样式实现

效果如下

代码如下

javascript 复制代码
<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="序号" 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;
}

/* 表格内tr背景色修改 */
.regulaContainer .el-table tr {
  background-color: transparent !important;
  border: 1px;
  /* 设置字体大小 */
  font-size: 16px;
  color: #fff;
}

/*表格内td背景色修改*/
.regulaContainer .el-table td {
  background-color: transparent !important;
  border: 1px;
  /* 设置字体大小 */
  font-size: 16px;
  color: #fff;
}

.regulaContainer .current-row {
  /* 选中时的图片显示 */
  background: rgb(26, 46, 161);
  background-size: 100% 100% !important;
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.regulaContainer .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgb(60, 10, 175) !important;
  /* color: #f19944; */
  /* 设置文字颜色,可以选择不设置 */
}
</style>
相关推荐
烛阴15 分钟前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript
前端开发爱好者40 分钟前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
wayhome在哪44 分钟前
Cropper.js 轻松拿捏前端裁剪🤞
javascript·canvas·设计
&白帝&1 小时前
vue2和vue3的对比
javascript·vue.js·ecmascript
江东大都督周总1 小时前
rabbitmq集群
javascript·rabbitmq·ruby
一嘴一个橘子1 小时前
uniapp 顶部tab + 占满剩余高度的内容区域swiper
javascript·uni-app
wayhome在哪2 小时前
30KB 轻量王者!SortableJS 轻松搞定拖拽需求
javascript·设计·dom
骑驴看星星a2 小时前
Vue中的scoped属性
前端·javascript·vue.js
四月_h2 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_427506082 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js