0
0

vue element ui table行点击添加自定义行背景色

1.在table添加cell-style属性

  1.   :cell-style="TableCellStyle"

2.在methods中添加TableCellStyle

  1.     TableCellStyle(row) {
  2.       if (this.row === row.row) {
  3.         return "background-color:#214F81;color: #ffffff !important;";
  4.       } else {
  5.         return "background-color:transparent;";
  6.       }
  7.     },

3.在table添加row-click

  1.  @row-click="RowClickFun"

4.在methods中添加RowClickFun

  1.     RowClickFun(row, column, event) {
  2.       console.log("row, column, event", row, column, event);
  3.       debounce(() => {
  4.         this.row = row;
  5.       
  6.       }, 500);
  7.     },

5.代码

tablecpt组件，tablecpt/index.vue

  1. <template>
  2.   <div class="TableComponent">
  3.     <el-table
  4.       :data="TableData"
  5.       style="width: 100%; height: 100%"
  6.       :row-class-name="tableRowClassName"
  7.       :header-cell-style="tableHeaderColor"
  8.       @row-click="RowClickFun"
  9.       :cell-style="TableCellStyle"
  10.       >
  11.       <el-table-column
  12.         prop="chargeMessage"
  13.         label="时间"
  14.         show-overflow-tooltip
  15.         align="center"
  16.       >
  17.         <template slot-scope="scope">
  18.           <div class="chargeMessageDiv">
  19.             {{ scope.row.chargeMessage }}
  20.           </div>
  21.         </template>
  22.       </el-table-column>
  23.       <el-table-column prop="chargeUrl" label="名字" align="center">
  24.         <template slot-scope="scope">
  25.           <div class="chargeUrlDiv">
  26.             {{ scope.row.chargeUrl }}
  27.           </div>
  28.         </template>
  29.       </el-table-column>
  30.       <el-table-column prop="rate" label="速率" align="center">
  31.         <template slot-scope="scope">
  32.           <div class="rateDiv">
  33.             {{ scope.row.rate }}
  34.           </div>
  35.         </template>
  36.       </el-table-column>
  37.       <el-table-column prop="chargeType" label="类型" align="center">
  38.         <template slot-scope="scope">
  39.           <div class="chargeTypeDiv">
  40.             {{ scope.row.chargeType }}
  41.           </div>
  42.         </template>
  43.       </el-table-column>
  44.       <el-table-column label="点击" align="center" width="90">
  45.         <template slot-scope="scope">
  46.           <div class="SetLocationDivOutbox">
  47.             <div
  48.               class="SetLocationDiv iconfont icon-shuichang"
  49.               @click.stop="DWFun(scope.row, scope.$index)"
  50.               :class="
  51.                 ActiveIconStyleStatus && ActiveIconNowIndex == scope.$index
  52.                   ? 'ActiveIconStyle'
  53.                   : 'NormalIconStyle'
  54.               "
  55.             ></div>
  56.           </div>
  57.         </template>
  58.       </el-table-column>
  59.     </el-table>
  60.   </div>
  61. </template>
  62. <script>
  63. import debounce from "@/utils/debounce";
  64. import Bus from "@/utils/bus.js";
  65. import { mapGetters } from "vuex";
  66. import AxiosUrl from "@/config/AxiosUrl";
  67. import mixin from "@/pages/HomePage/mixin";
  68. export default {
  69.   name: "TableComponent",
  70.   mixins: [mixin],
  71.   props: ["TableData"],
  72.   computed: {
  73.     ...mapGetters({}),
  74.   },
  75.   data() {
  76.     return {
  77.       row: {},
  78.       ActiveIconStyleStatus: false,
  79.       ActiveIconNowIndex: null,
  80.     };
  81.   },
  82.   mounted() {
  83.     this.$nextTick(() => {
  84.       this.row = this.TableData[0];
  85.     });
  86.   },
  87.   methods: {
  88.     // 修改table header的背景色
  89.     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
  90.       if (rowIndex === 0) {
  91.         return this.themeName == "default"
  92.           ? "background-color: #102C51"
  93.           : "background-color: #102C51";
  94.       }
  95.     },
  96.     // 修改table row的背景色
  97.     tableRowClassName({ row, rowIndex }) {
  98.       if (rowIndex % 2 == 0) {
  99.         if (row.IsDispatch == 1) {
  100.           return "DispatchRowStyle";
  101.         }
  102.         return "evenRowStyle";
  103.       } else {
  104.         if (row.IsDispatch == 1) {
  105.           return "DispatchRowStyle";
  106.         }
  107.         return "oddRowStyle";
  108.       }
  109.     },
  110.     RowClickFun(row, column, event) {
  111.       console.log("row, column, event", row, column, event);
  112.       debounce(() => {
  113.         this.row = row;
  114.       
  115.       }, 500);
  116.     },
  118.     TableCellStyle(row) {
  119.       if (this.row === row.row) {
  120.         return "background-color:#214F81;color: #ffffff !important;";
  121.       } else {
  122.         return "background-color:transparent;";
  123.       }
  124.     },
  126.     DWFun(row, index) {
  127.       debounce(() => {
  128.         if (this.ActiveIconNowIndex == index) {
  129.           this.ActiveIconStyleStatus = !this.ActiveIconStyleStatus;
  130.           this.ActiveIconNowIndex = this.ActiveIconStyleStatus ? index : null;
  131.         } else {
  132.           this.ActiveIconNowIndex = index;
  133.           this.ActiveIconStyleStatus = true;
  134.         }
  136.         if (this.ActiveIconStyleStatus) {
  137.           console.log("%c可以执行", "color:green", row);
  138.         } else {
  139.           console.log("%c不可以执行", "color:red");
  140.         }
  141.       }, 500);
  142.     },
  143.   },
  144. };
  145. </script>
  146. <style lang="scss">
  147. .el-table td.el-table__cell,
  148. .el-table th.el-table__cell.is-leaf {
  149.   border-bottom: none;
  150. }
  151. .el-table--border::after,
  152. .el-table--group::after,
  153. .el-table::before {
  154.   content: "";
  155.   position: absolute;
  156.   background-color: transparent;
  157.   z-index: 1;
  158. }
  159. .el-table,
  160. .el-table__expanded-cell {
  161.   background-color: transparent;
  162. }
  163. </style>
  164. <style lang="scss" scoped>
  165. .TableComponent {
  166.   width: 100%;
  167.   height: 100%;
  168.   background: transparent;
  169.   ::v-deep .el-table {
  170.     width: 100%;
  171.     height: 100% !important;
  172.     tr {
  173.       background-color: transparent;
  174.     }
  175.     .cell {
  176.       line-height: 48px;
  177.     }
  178.     tbody tr:hover > td {
  179.       background: inherit;
  180.       cursor: pointer;
  181.     }
  182.     .el-table__header-wrapper {
  183.       background: #102c51;
  184.       th {
  185.         font-size: 28px;
  186.         font-family: Microsoft YaHei !important;
  187.         font-weight: 500 !important;
  188.         color: #fff;
  189.       }
  190.       .el-table__cell {
  191.         height: 48px;
  192.         padding: 0;
  193.       }
  194.     }
  195.     .el-table__body-wrapper {
  196.       background: transparent;
  197.       height: calc(100% - 48px) !important;
  198.       overflow-x: hidden;
  199.       overflow-y: auto;
  201.       &::-webkit-scrollbar {
  202.         width: 5px;
  203.         height: 5px;
  204.         background-color: #07192f;
  205.         background-color: transparent;
  206.       }
  207.       /*定义滚动条轨道 内阴影+圆角*/
  208.       &::-webkit-scrollbar-track {
  209.         //  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  210.         border-radius: 2px;
  211.         background-color: #07192f;
  212.         background-color: transparent;
  213.       }
  214.       /*定义滑块 内阴影+圆角*/
  215.       &::-webkit-scrollbar-thumb {
  216.         border-radius: 20px;
  217.         // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  218.         background-color: #07192f;
  219.         //background-color: transparent;
  220.       }
  221.       .el-table__row {
  222.         .el-table__cell {
  223.           height: 48px;
  224.           font-size: 28px;
  225.           font-family: Microsoft YaHei !important;
  226.           font-weight: 400 !important;
  227.           color: #fff;
  228.           padding: 0;
  229.         }
  230.       }
  231.     }
  232.     .oddRowStyle {
  233.       background: #102c51;
  234.     }
  235.     .evenRowStyle {
  236.       background: transparent;
  237.     }
  238.     .DispatchRowStyle {
  239.       background: red;
  240.       div {
  241.         color: #ffffff !important;
  242.       }
  243.     }
  244.     .chargeMessageDiv {
  245.       overflow: hidden;
  246.       text-overflow: ellipsis;
  247.       white-space: nowrap;
  248.     }
  249.     .DepositionDivOutbox {
  250.       display: flex;
  251.       flex-flow: row nowrap;
  252.       justify-content: center;
  253.       align-items: center;
  254.       width: 100%;
  255.       height: 100%;
  256.       .DepositionDiv {
  257.         display: flex;
  258.         flex-flow: row nowrap;
  259.         justify-content: center;
  260.         align-items: center;
  261.         width: 80%;
  262.         height: 38px;
  263.         border-radius: 4px;
  264.       }
  265.       .LH_activeColor {
  266.         background: #0aa0de;
  267.       }
  268.       .QW_activeColor {
  269.         background: #2fa652;
  270.       }
  271.       .ZD_activeColor {
  272.         background: #de910a;
  273.       }
  274.       .YZ_activeColor {
  275.         background: #cb563d;
  276.       }
  277.     }
  278.     .PlanDivOutbox {
  279.       display: flex;
  280.       flex-flow: row nowrap;
  281.       justify-content: center;
  282.       align-items: center;
  283.       width: 100%;
  284.       height: 100%;
  286.       .PlanDiv {
  287.         display: flex;
  288.         flex-flow: row nowrap;
  289.         justify-content: center;
  290.         align-items: center;
  291.         width: 100%;
  292.         height: 38px;
  293.         border-radius: 4px;
  294.       }
  295.       .activeColor {
  296.         background-color: #da2f2f;
  297.       }
  298.     }
  299.     .SetLocationDivOutbox {
  300.       display: flex;
  301.       flex-flow: row nowrap;
  302.       justify-content: center;
  303.       align-items: center;
  304.       width: 100%;
  305.       height: 100%;
  307.       .SetLocationDiv {
  308.         font-size: 28px;
  309.       }
  310.       .ActiveIconStyle {
  311.         color: #00eaff;
  312.       }
  313.       .NormalIconStyle {
  314.         color: #fff;
  315.       }
  316.     }
  317.   }
  318. }
  319. </style>

引入tablecpt组件

  1. <template>
  2.   <div class="HomePage">
  3.     <div class="HomePageOutbox">
  4.       <component :is="'tablecpt'" :TableData="chargeInfoList"></component>
  5.     </div>
  6.   </div>
  7. </template>
  8. <script>
  9. import debounce from "@/utils/debounce";
  10. import Bus from "@/utils/bus.js";
  11. import { mapGetters } from "vuex";
  12. import AxiosUrl from "@/config/AxiosUrl";
  13. import { setTheme, themeList } from "@/themeConfig/setTheme.js";
  14. import mixin from "@/pages/HomePage/mixin";
  15. import tablecpt from "./tablecpt/index.vue";
  16. export default {
  17.   name: "HomePage",
  18.   mixins: [mixin],
  19.   components: {
  20.     tablecpt,
  21.   },
  22.   computed: {
  23.     ...mapGetters({
  24.      
  25.     }),
  26.   },
  27.   data() {
  28.     return {
  29.       themeList: themeList,
  30.       setTheme: setTheme,
  31.       chargeInfoList: [
  32.         {
  33.           rate: 1280,
  34.           chargeUrl: "热狗",
  35.           chargeMessage: "2022-05-02",
  36.           chargeType:2,
  37.         },
  38.         {
  39.           rate: 1920,
  40.           chargeUrl: "姚中仁",
  41.           chargeMessage: "2021-05-02",
  42.           chargeType: 3,
  43.         },
  44.         {
  45.           rate: 3200,
  46.           chargeUrl: "哈狗帮",
  47.           chargeMessage: "2019-05-02",
  48.           chargeType: 0,
  49.         },
  50.         {
  51.           rate: 9990,
  52.           chargeUrl: "遥远的梦",
  53.           chargeMessage: "2016-05-02",
  54.           chargeType: 1,
  55.         },
  56.       ],
  57.     };
  58.   },
  59.   mounted() {
  60.     //this.getTimeNowStausfun()
  61.     // this.$store.commit('HomePageModule/set_TestData', "data")
  62.     // this.$store.dispatch('HomePageModule/TestDatafun', data)
  63.   },
  64.   methods: {
  65.    
  66.   },
  67. };
  68. </script>
  69. <style lang="scss" scoped>
  70. .HomePage {
  71.   display: flex;
  72.   flex-flow: row nowrap;
  73.   justify-content: center;
  74.   align-items: center;
  75.   width: 100%;
  76.   height: 100%;
  77.   .HomePageOutbox {
  78.     width: calc(100% - 60px);
  79.     height: calc(100% - 60px);
  80.     background: rgba(0, 0, 71, 0.825);
  81.   }
  82. }
  83. </style>

mixin文件

  1. import debounce from "@/utils/debounce";
  2. import Bus from "@/utils/bus.js";
  3. import {
  4.     mapGetters
  5. } from "vuex";
  6. import AxiosUrl from "@/config/AxiosUrl";
  7. const mixin = {
  8.     filters: {
  9.         formatLongText(value) {
  10.             if (value === undefined || value === null || value === "") {
  11.                 return "暂无";
  12.             } else if (value.length > 8) {
  13.                 return value.substr(0, 8) + "...";
  14.             } else {
  15.                 return value;
  16.             }
  17.         },
  19.         ellipsis(value, limit) {
  20.             if (!value) return "";
  21.             if (value.length > limit) {
  22.                 return value.slice(0, limit) + "...";
  23.             }
  24.             return value;
  25.         },
  26.     },
  27.     data() {
  28.         return {
  29.             publicPath: process.env.BASE_URL,
  30.         }
  31.     },
  32.     computed: {
  33.         ...mapGetters({
  34.             GetTestData: "HomePageModule/GetTestData",
  35.         }),
  36.     },
  37.     created() {},
  38.     mounted() {},
  39.     methods: {
  40.         //初始化、定时1分钟刷新数据
  41.         getTimeNowStausfun() {
  42.             if (this.NowStaustimerH) {
  43.                 window.clearInterval(this.NowStaustimerH);
  44.                 this.NowStaustimerH = null;
  45.             }
  46.             this.GetData();
  48.             this.NowStaustimerH = setInterval(() => {
  50.             }, 60000);
  51.             this.$once("hook:beforeDestroy", () => {
  52.                 console.log("清除定时器NowStaustimerH");
  53.                 window.clearInterval(this.NowStaustimerH);
  54.                 this.NowStaustimerH = null;
  55.             });
  56.         },
  58.         GetData() {
  59.             this.$axios
  60.                 .post(AxiosUrl.HomePageUrlPath + "GetPredictData")
  61.                 .then((res) => {
  62.                     console.log("res", res);
  63.                 });
  64.         },
  66.     },
  67. }
  68. export default mixin
标签： css vue.js css3
本文转载自: https://blog.csdn.net/qq_37312180/article/details/128168351
版权归原作者 volodyan 所有， 如有侵权，请联系我们删除。
登录后发布评论

“vue element ui table行点击添加自定义行背景色”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？