css vue.js css3 vue element ui table行点击添加自定义行背景色

1.在table添加cell-style属性

:cell-style="TableCellStyle"

 2.在methods中添加TableCellStyle

TableCellStyle(row) {

if (this.row === row.row) {

return "background-color:#214F81;color: #ffffff !important;";

} else {

return "background-color:transparent;";

}

},

3.在table添加row-click

@row-click="RowClickFun"

4.在methods中添加RowClickFun

RowClickFun(row, column, event) {

console.log("row, column, event", row, column, event);

debounce(() => {

this.row = row;

}, 500);

},

 5.代码

tablecpt组件，tablecpt/index.vue 

 引入tablecpt组件

mixin文件

import debounce from "@/utils/debounce";

import Bus from "@/utils/bus.js";

import {

mapGetters

} from "vuex";

import AxiosUrl from "@/config/AxiosUrl";

const mixin = {

filters: {

formatLongText(value) {

if (value === undefined || value === null || value === "") {

return "暂无";

} else if (value.length > 8) {

return value.substr(0, 8) + "...";

} else {

return value;

}

},

ellipsis(value, limit) {

if (!value) return "";

if (value.length > limit) {

return value.slice(0, limit) + "...";

}

return value;

},

},

data() {

return {

publicPath: process.env.BASE_URL,

}

},

computed: {

...mapGetters({

GetTestData: "HomePageModule/GetTestData",

}),

},

created() {},

mounted() {},

methods: {

//初始化、定时1分钟刷新数据

getTimeNowStausfun() {

if (this.NowStaustimerH) {

window.clearInterval(this.NowStaustimerH);

this.NowStaustimerH = null;

}

this.GetData();

this.NowStaustimerH = setInterval(() => {

}, 60000);

this.$once("hook:beforeDestroy", () => {

console.log("清除定时器NowStaustimerH");

window.clearInterval(this.NowStaustimerH);

this.NowStaustimerH = null;

});

},

GetData() {

this.$axios

.post(AxiosUrl.HomePageUrlPath + "GetPredictData")

.then((res) => {

console.log("res", res);

});

},

},

}

export default mixin

精彩链接