Vue项目中使用element-plus的el-table组件-组件使用-样式修改

已于 2023-11-23 14:42:27 修改
阅读量764 收藏
点赞数
分类专栏： Vue 文档 文章标签： vue.js javascript 前端
于 2023-09-18 07:57:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JackieDYH/article/details/132910855
版权
文档 同时被 2 个专栏收录
20 篇文章 0 订阅 ¥9.90 ¥99.00
订阅专栏 超级会员免费看
Vue
336 篇文章 80 订阅
订阅专栏
本文介绍了在Vue项目中如何使用element-plus的el-table组件，并详细讲解了如何进行样式重置和单元格背景填充的修改，通过代码示例展示了具体的实现过程。
摘要由CSDN通过智能技术生成

项目配置

<div class="table-wrap">
      <el-table
        class="table-card-container"
        :data="tableData"
        style="width: 100%"
      >
        <template v-for="column in tableColumn">
          <el-table-column
            v-if="column.isShow"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :fixed="column.fixed"
            :width="column.width"
            :align="column.align"
          >
            <!-- :label="column.label" -->
            <!-- <template #header></template> -->
            <template #default="scope">
              <!-- <div v-if="column.label == '币种'" class="bz-icon">
                <img :src="getIcon(scope.row.bz)" />
                {{ scope.row.bz }}
              </div>
              <div v-if="column.label == '价格(24h%)'">
                <span
                  :class="{
                    'long-color': +scope.row.jg24 >= 0,
                    'short-color': +scope.row.jg24 < 0
                  }"
                >
                  {{ formatValue(scope.row.jg24, 'zfb') }}
                </span>
              </div> -->
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
const tableColumn = ref([
  {
    label: '排名',
    prop: 'pm',
    fixed: false,
    width: 80,
    isShow: true,
    align: 'center'
  },
  {
    label: '平台',
    prop: 'pt',
    fixed: false,
    width: 120,
    isShow: true,
    align: 'left'
  },
  {
    label: '持仓量',
    prop: 'ccl',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'left'
  },
  {
    label: '持仓额',
    prop: 'cce',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'left'
  },
  {
    label: '占比',
    prop: 'zb',
    fixed: false,
    width: 120,
    isShow: true,
    align: 'left'
  },
  {
    label: '持仓变化(1小时)',
    prop: 'ccbh1',
    fixed: false,
    width: 160,
    isShow: true,
    align: 'left'
  },
  {
    label: '持仓变化(4小时)',
    prop: 'ccbh4',
    fixed: false,
    width: 160,
    isShow: true,
    align: 'left'
  },
  {
    label: '持仓变化(24小时)',
    prop: 'ccbh24',
    fixed: false,
    width: 160,
    isShow: true,
    align: 'left'
  },
  {
    label: '持仓/24小时成交量',
    prop: 'cc24cjl',
    fixed: false,
    width: 160,
    isShow: true,
    align: 'right'
  }
]);
const tableData = [
  {
    pt: 'BTC',
    pm: '1',
    ccl: '123.32BTC',
    cce: '$131.32亿',
    zb: '1',
    ccbh1: '0.0032',
    ccbh4: '0.002',
    ccbh24: '0.0649',
    cc24cjl: '0.243243'
  }
];

样式重置修改文件

.table-card-container {
    @gray-bg: #080514;
    // --el-table-border: none;
    --el-table-border-color:#252525;
    --el-table-row-hover-bg-color:@gray-bg;
--el-fill-color-blank: @gray-bg;
    :deep(.el-table__header) {
      .el-table__cell {
        padding: 0;
        height: 50px;
        background: @gray-bg;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        color: #868E9B;
  
        // &.ascending {
        //   .caret-wrapper {
        //     .sort-caret.ascending {
        //       border-bottom-color: #0ECB81;
        //     }
        //   }
        // }
  
        // &.descending {
        //   .caret-wrapper {
        //     .sort-caret.descending {
        //       border-top-color: #0ECB81;
        //     }
        //   }
        // }
      }
  
    }
  
    :deep(.el-table__body) {

    //   .el-table__row:nth-child(2n) {
    //     background: @gray-bg;
    //   }
  
      // .el-table__body{
      //   background: @gray-bg;
      // }
      
      .el-table__row {
        padding: 0;
        height: 60px;
        font-family: DIN,DIN-Medium, arial, sans-serif;
        font-size: 14px;
        color: #FFFFFF;
        --el-table-tr-bg-color: @gray-bg;
        .el-table__cell{
          --el-bg-color: @gray-bg;
        }
      }
      // .hover-row{
      //   --el-table-row-hover-bg-color:@gray-bg;
      // }
      
    }
    :deep(.el-table__body-wrapper) {
      background-color: @gray-bg;
    }
    :deep(.el-pagination) {
      --el-pagination-bg-color: #fff;
      --el-pagination-button-disabled-bg-color: transparent;
      --el-pagination-button-disabled-color: #868E9B;
      --el-pagination-hover-color: #0ECB81;
      --el-pagination-button-color: #868E9B;
      --el-pagination-font-size: 14px;
      font-family: DIN-Medium, arial, sans-serif;
      margin-top: 50px;
      justify-content: center;
  
      .btn-prev .el-icon,
      .btn-next .el-icon {
        font-size: 15px;
      }
      .el-pager {
        .number {
          margin: 0 8px
        }
        .is-active {
          background: #0ECB81;
          color: #fff;
        }
      }
    }
  }

单元格背景填充 

代码

<template>
  <div class="TableList">
    <div class="title">
      <h1>数字货币合约爆仓图表</h1>
      <div class="title-right">
        <el-input class="search-input" v-model="searchText" placeholder="搜索">
          <template #prefix>
            <img src="@/assets/images/prices/search.svg" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="table-wrap">
      <el-table
        class="table-card-container"
        :data="tableData"
        style="width: 100%"
      >
        <template v-for="column in tableColumn">
          <el-table-column
            v-if="column.isShow"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :fixed="column.fixed"
            :width="column.width"
            :align="column.align"
          >
            <!-- :label="column.label" -->
            <!-- <template #header></template> -->
            <template #default="scope">
              <div v-if="column.label == '排名'" class="label-icon">
                <span>{{ scope.$index + 1 }}</span>
              </div>
              <div v-if="column.label == '币种'" class="label-icon">
                <img :src="getIcon(scope.row.bz)" />
                <span>{{ scope.row.bz }}</span>
              </div>
              <div v-if="column.label == '价格(24h%)'">
                <span
                  :class="{
                    'long-color': +scope.row.jg24 >= 0,
                    'short-color': +scope.row.jg24 < 0
                  }"
                  >{{ formatValue(scope.row.jg24, 'zfb') }}</span
                >
              </div>
              <div
                v-if="column.label == '1小时多单爆仓'"
                class="label-lty"
                :class="{
                  'long-bg-color': +scope.row.ddbc1s == 0,
                  'short-bg-color': +scope.row.ddbc1s == 1
                }"
              >
                <span>
                  {{ scope.row.ddbc1 }}
                </span>
              </div>
              <div
                v-if="column.label == '1小时空单爆仓'"
                class="label-lty"
                :class="{
                  'long-bg-color': +scope.row.kdbc1s == 0,
                  'short-bg-color': +scope.row.kdbc1s == 1
                }"
              >
                <span>
                  {{ scope.row.kdbc1 }}
                </span>
              </div>
              <div
                v-if="column.label == '4小时多单爆仓'"
                class="label-lty"
                :class="{
                  'long-bg-color': +scope.row.ddbc4s == 0,
                  'short-bg-color': +scope.row.ddbc4s == 1
                }"
              >
                <span>
                  {{ scope.row.ddbc4 }}
                </span>
              </div>
              <div
                v-if="column.label == '4小时空单爆仓'"
                class="label-lty"
                :class="{
                  'long-bg-color': +scope.row.kdbc4s == 0,
                  'short-bg-color': +scope.row.kdbc4s == 1
                }"
              >
                <span>
                  {{ scope.row.kdbc4 }}
                </span>
              </div>
              <div
                v-if="column.label == '24小时多单爆仓'"
                class="label-lty"
                :class="{
                  'long-bg-color': +scope.row.ddbc24s == 0,
                  'short-bg-color': +scope.row.ddbc24s == 1
                }"
              >
                <span>
                  {{ scope.row.ddbc24 }}
                </span>
              </div>
              <div
                v-if="column.label == '24小时空单爆仓'"
                class="label-lty"
                :class="{
                  'long-bg-color': +scope.row.kdbc24s == 0,
                  'short-bg-color': +scope.row.kdbc24s == 1
                }"
              >
                <span>
                  {{ scope.row.kdbc24 }}
                </span>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <div class="pagination">
        <ElPagination
          v-model:current-page="page"
          :page-size="pageSize"
          :total="allTotalCount"
          layout="prev, pager, next"
          hide-on-single-page
          @current-change="onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  getIcon,
  getExchangeIcon,
  formatValue
} from '@/views/Prices/Hooks/useUtils.js';
const searchText = ref('');
const allTotalCount = ref(100);
const pageSize = ref(10);
const page = ref(1);
const onCurrentChange = (pageIdx) => {
  page.value = pageIdx;
};
const tableColumn = ref([
  {
    label: '排名',
    prop: 'pm',
    fixed: false,
    width: 70,
    isShow: true,
    align: 'left'
  },
  {
    label: '币种',
    prop: 'bz',
    fixed: false,
    width: 128,
    isShow: true,
    align: 'center'
  },
  {
    label: '价格',
    prop: 'jg',
    fixed: false,
    width: 120,
    isShow: true,
    align: 'left'
  },
  {
    label: '价格(24h%)',
    prop: 'jg24',
    fixed: false,
    width: 120,
    isShow: true,
    align: 'center'
  },
  {
    label: '1小时多单爆仓',
    prop: 'ddbc1',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'center'
  },
  {
    label: '1小时空单爆仓',
    prop: 'kdbc1',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'center'
  },
  {
    label: '4小时多单爆仓',
    prop: 'ddbc4',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'center'
  },
  {
    label: '4小时空单爆仓',
    prop: 'kdbc4',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'center'
  },
  {
    label: '24小时多单爆仓',
    prop: 'ddbc24',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'center'
  },
  {
    label: '24小时空单爆仓',
    prop: 'kdbc24',
    fixed: false,
    width: 130,
    isShow: true,
    align: 'center'
  }
]);
const tableData = [
  {
    bz: 'ddd',
    jg: '$2342.1',
    jg24: '0.0023',
    ddbc1: '$2342.1万',
    ddbc1s: '1',
    kdbc1: '$2342.1万',
    kdbc1s: '0',
    ddbc4: '$2342.1万',
    ddbc4s: '0',
    kdbc4: '$2342.1万',
    kdbc4s: '1',
    ddbc24: '$2342.1万',
    ddbc24s: '1',
    kdbc24: '$2342.1万',
    kdbc24s: '1'
  },
  {
    bz: 'ddd',
    jg: '$2342.1',
    jg24: '0.0023',
    ddbc1: '$2342.1万',
    ddbc1s: '0',
    kdbc1: '$2342.1万',
    kdbc1s: '1',
    ddbc4: '$2342.1万',
    ddbc4s: '0',
    kdbc4: '$2342.1万',
    kdbc4s: '0',
    ddbc24: '$2342.1万',
    ddbc24s: '1',
    kdbc24: '$2342.1万',
    kdbc24s: '0'
  }
];
</script>

<style lang="less" scoped>
@import '../tableStyle2';
.TableList {
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    h1 {
      color: #fff;
      font-family: PingFang SC;
      font-size: 24px;
      font-weight: 600;
    }
    .title-right {
      display: flex;
      .search-input {
        width: 225px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #404040;
        // margin-right: 15px;
        background: #121212;
        :deep(.el-input__inner) {
          color: #fff;
        }
      }
    }
  }
  .table-wrap {
    .table-card-container {
      :deep(.el-table__header) {
        .el-table__cell {
          .cell {
            padding: 0 4px;
          }
        }
      }
      :deep(.el-table__body) {
        .el-table__cell {
          .cell {
            padding: 0 4px;
          }
        }
      }
    }
    .label-icon {
      color: #fff;
      font-family: DIN;
      font-size: 14px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
        vertical-align: text-top;
      }
    }
    .label-lty {
      height: 60px;
      line-height: 60px;
    }
    --table-bg-Short1: rgba(226, 98, 109, 0.2);
    --table-bg-Long1: rgba(14, 203, 129, 0.2);
    .long-bg-color {
      background: var(--table-bg-Long1);
    }
    .short-bg-color {
      background: var(--table-bg-Short1);
    }
    .pagination {
      padding-top: 30px;
      padding-bottom: 50px;
    }
  }
}
</style>

样式重置修改

.table-card-container {
  @gray-bg: transparent;//#18191e;
  // --el-table-border: none;
  --el-table-border-color: #252525;
  --el-table-row-hover-bg-color: @gray-bg;
  --el-fill-color-blank: @gray-bg;
    :deep(.el-table__header) {
      .el-table__cell {
        padding: 0;
        height: 50px;
        background: @gray-bg;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        color: #868e9b;
  
        // &.ascending {
        //   .caret-wrapper {
        //     .sort-caret.ascending {
        //       border-bottom-color: #0ECB81;
        //     }
        //   }
        // }
  
        // &.descending {
        //   .caret-wrapper {
        //     .sort-caret.descending {
        //       border-top-color: #0ECB81;
        //     }
        //   }
        // }
      }
  
    }
  
    :deep(.el-table__body) {

    //   .el-table__row:nth-child(2n) {
    //     background: @gray-bg;
    //   }
  
      // .el-table__body{
      //   background: @gray-bg;
      // }
      
      .el-table__row {
        padding: 0;
        height: 60px;
        font-family: DIN,DIN-Medium, arial, sans-serif;
        font-size: 14px;
        color: #FFFFFF;
        --el-table-tr-bg-color: @gray-bg;
        .el-table__cell{
          padding: 0;
          --el-bg-color: @gray-bg;
        }
      }
      // .hover-row{
      //   --el-table-row-hover-bg-color:@gray-bg;
      // }
      
    }
    :deep(.el-table__body-wrapper) {
      background-color: @gray-bg;
    }
    :deep(.el-pagination) {
      --el-pagination-bg-color: #fff;
      --el-pagination-button-disabled-bg-color: transparent;
      --el-pagination-button-disabled-color: #868E9B;
      --el-pagination-hover-color: #0ECB81;
      --el-pagination-button-color: #868E9B;
      --el-pagination-font-size: 14px;
      font-family: DIN-Medium, arial, sans-serif;
      margin-top: 50px;
      justify-content: center;
  
      .btn-prev .el-icon,
      .btn-next .el-icon {
        font-size: 15px;
      }
      .el-pager {
        .number {
          margin: 0 8px
        }
        .is-active {
          background: #0ECB81;
          color: #fff;
        }
      }
    }
  }

JackieDYH
关注
专栏目录
订阅专栏
4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）
GIS之家家长
09-14 1841
15.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）
element-plus table修改样式
m0_47450083的博客
05-19 821
2.如果有两个input但是样式不一样 就分别加类名。隔行修改样式 用:row-class-name。1.修改placeholder样式。
Vue2 封装Element 的 el-table表格组件
最新发布
清蒸西兰花
08-21 922
在开发后台项目时，常常需要处理多个表格，这些表格在功能和样式上往往相似。为了避免重复造轮子，封装这些重复的代码是必然之举。
Element-plus修改样式
daimaxiaodao的博客
01-26 4095
修改样式合集
vue2中使用el-table实现直接编辑表格，鼠标点击空白处实现保存并传递给后端的简单方法
Chen__FY的博客
12-07 3573
需求实现如下：点击某个单元格实现整行数据高亮，并且可以修改，修改完成后鼠标点击空白处，实现保存修改后的整行数据并传递给后端。，当不点击单元格时显示值，点击单元格时显示编辑框，用。，意思就是选中某个数据行时,高亮该行。3. 在el-input中。1.首先我们需要用到。
element ui plus调整table表格样式
weixin_47560716的博客
02-23 799
【代码】element ui plus调整table表格样式。
修改ElTable组件的样式（element-plus）
Mozifei73的博客
05-07 643
【代码】修改ElTable组件的样式（element-plus）
Element Plus 的 Tabs 标签页如何修改Tab标签字体样式
weixin_43124438的博客
08-11 3801
修改Element-Plus的tab标签字体样式
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：...table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
vue修改Element的el-table样式的4种方法
01-18
修改Element中的el-table样式，可以使用以下几种方法： 　　1. row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 　　2. cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 　　3. header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 　　4. header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Ob
4.（vue3.x+vite）更改element-plus组件样式的几种方式（如：el-table）.rar
09-22
在Vue 3.x和Vite的环境中，与Element Plus组件库配合使用时，有时我们需要根据项目需求自定义组件样式，例如修改`el-table`表格组件的样式。Element Plus是基于Vue 3的UI组件库，提供了丰富的组件供开发者使用。在本...
element中el-table根据状态改变样式，你不能错过的技能
Shids_的博客
02-25 3764
element中el-table根据状态改变样式，你不能错过的技能
vue3+ElementPlus: 调整el-table表格的默认样式
扬雨于今
06-28 2372
需求：调整el-table表格的默认样式，直接在el-table和el-table-column上设置style并不会生效，需要在调试模式下（鼠标右击，选择“检查”）查看表格元素的实际位置，并设置其样式。
vue3+element-plus table表格自定义背景，表头，斑马条纹颜色
热门推荐
m0_67796383的博客
11-30 1万+
注：element-plus的table表格里面有自带的斑马条纹属性 stripe不需要写，否则自定义斑马条纹颜色样式不生效。
vue3 elementplus 多语言 i18n
weixin_43292547的博客
08-13 1322
参考lang.vue，使用ElConfigProvider可在页面动态修改elementplus的语言。el-config-provider组件可放在任何地方，可包裹任意内容。
element plus之el-table行融合+列融合+小计行+自定义控件+样式自定义方案
visket2008的专栏
11-04 6310
旨在解决项目过程中遇到基于el-table实现项目需要的在线类似Excel的编辑统计展示能力，如何应对行列融合、样式修正、小计行添加等需求如何处理。项目web端使用的是vue3+element plus，下面代码介绍等相关内容均以vue3+ts语法描述。
vue3 element-puls el-table 汇总行单元格合并
05-17
要实现Vue3 Element-Plus的el-table汇总行单元格合并，你可以使用`span-method`属性来定义一个函数，该函数可以返回每个单元格需要合并的行数和列数。下面是一个示例代码： ```html <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> <el-table-column label="合计" :span-method="objectSpanMethod"> <template #default="{ rows, row, column, $index }"> <span v-if="$index === 0">{{ row.total }}</span> </template> </el-table-column> </el-table> ``` 在上面的代码中，我们定义了一个`objectSpanMethod`方法，并将其赋值给`span-method`属性。这个方法接收四个参数：`{ rows, row, column, $index }`。其中`rows`是当前列的所有行数据，`row`是当前行数据，`column`是当前列数据，`$index`是当前行的索引。 下面是`objectSpanMethod`方法的实现： ```js methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 3) { if (rowIndex === 0) { return { rowspan: this.tableData.length, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } } ``` 在上面的代码中，我们检查当前列是否为第四列（即“合计”列），如果是，我们检查当前行是否为第一行。如果是，我们返回一个对象`{ rowspan: this.tableData.length, colspan: 1 }`，其中`rowspan`表示当前单元格需要合并的行数，`colspan`表示当前单元格需要合并的列数。如果当前行不是第一行，则返回一个空对象`{ rowspan: 0, colspan: 0 }`，表示当前单元格不需要合并。 这样，我们就可以实现Vue3 Element-Plus的el-table汇总行单元格合并了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JackieDYH

谢谢您嘞！我会继续加油地

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值