element-ui中table样式修改

mini king

已于 2023-12-27 12:29:21 修改

阅读量934

点赞数 7

文章标签： ui vue.js elementui

于 2023-12-24 20:33:06 首次发布

本文链接：https://blog.csdn.net/qq_50386946/article/details/135186349

版权

本文介绍了如何使用Vue.js和ElementUI的el-table组件创建一个可定制的表格，包括动态行高、行样式切换、点击事件处理以及自定义CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="custom-table">
    <!-- :span-method="objectSpanMethod" -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @row-click="handleClickChange"
      :header-cell-style="{ borderBottom: '1px solid pink' }"
    >
      <el-table-column align="center" prop="date" label="日期" width="180"></el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column align="center" prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

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

const light = ref(false)
const selectId = ref()
const tableData = reactive([
  {
    id: 1,
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    id: 2,
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1517 弄'
  },
  {
    id: 3,
    date: '2016-05-01',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1519 弄'
  },
  {
    id: 4,
    date: '2016-05-03',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1516 弄'
  }
])
// const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//   if (rowIndex === 2) {
//     const rowSpan = tableData[rowIndex]
//     return {
//       rowspan: rowSpan, //行
//       colspan: 1 //列
//     }
//   }
// }
const tableRowClassName = ({ row, rowIndex }) => {
  if (row.id == selectId.value) {
    return 'default-row'
  } else if (rowIndex % 2 != 0) {
    return 'warning-row'
  } else {
    return ''
  }
}
const handleClickChange = (row) => {
  light.value = true
  selectId.value = row.id
}
</script>

<style lang="scss" scoped>
.custom-table {
  background-color: #082050;
  width: 100%;
  height: 100%;
}
:deep(.el-table) {
  // 修改表头背景颜色
  thead {
    color: #fff;
    font-weight: 500;
    background: linear-gradient(270deg, #002871 0%, #0f50c5 42%, #002871 100%) !important;
    & th {
      background-color: transparent;
    }
    & tr {
      background-color: transparent;
    }
  }
  background-color: unset !important;
  color: #c0e9ff;
  tr {
    background-color: unset !important;
  }
  //去掉最下面的那一条线
  .el-table__inner-wrapper::before {
    height: 0px;
  }
}
// 设置表格行高度
:deep(.custom-table tr, .el-table__body td) {
  padding: 0;
  height: 44px;
  background-color: unset;
}
// 設置label的背景色
.custom-table :deep(.el-table th) {
  border-bottom: none;
}
// 取消行之间的横向边框线
.custom-table :deep(.el-table td, .el-table th.is-leaf) {
  border-bottom: none;
}
// 去除默认的hover效果
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(0, 0, 0, 0) !important;
}
// 表格斑马自定义颜色
:deep(.el-table__row.warning-row) {
  background: linear-gradient(270deg, #002871 0%, #0f50c5 42%, #002871 100%);
  color: #c0e9ff;
}
:deep(.el-table__row.default-row) {
  background: linear-gradient(270deg, #00a0ff 0%, #0033ff 100%);
  box-shadow: 0px 8px 10px 0px rgba(0, 122, 255, 0.39);
  color: #c0e9ff;
  position: relative;
}
// 鼠标移动时hover效果
:deep(.el-table .el-table__row:hover) {
  background: skyblue !important;
  box-shadow: 0px 8px 10px 0px rgba(0, 122, 255, 0.39) !important;
  color: #ffffff;
}
:deep(.el-table .current-row:hover) {
  background: linear-gradient(270deg, #00a0ff 0%, #0033ff 100%) !important;
  box-shadow: 0px 8px 10px 0px rgba(0, 122, 255, 0.39) !important;
  color: #ffffff;
}
// 修改表头样式
:deep(.el-table__header-wrapper) {
  border-top: 4px solid pink !important;
}
</style>