点击表格行高亮

• css中三元表达式

:class="[activeIndex == index ? 'color' : '', 'item']"

• 点击行高亮

   <div @click="actvied(index)" :class="[activeIndex == index ? 'color' : '', 'item']"v-for="(item, index) in tableData" :key="index">{{ item.datafile }}</div></div>activeIndex: -1,actvied(index) {this.activeIndex = indexconsole.log(this.active);},

完整代码

<template><div style="display: flex;margin: 20px 0px 0px 50px;"><div class="condition"><div class="top">工况名</div><div class="bottom"><div @click="actvied(index)" :class="[activeIndex == index ? 'color' : '', 'item']"v-for="(item, index) in tableData" :key="index">{{ item.datafile }}</div></div></div><div class="test"><div class="top1">测点名</div><div class="bottom1"><div @click="handlePointClick(index)" :class="[selectedPointIndex == index ? 'color1' : '', 'item1']"v-for="(point, index) in pointData" :key="index">{{ point.pointname }}</div></div></div><div ref="chart" style="height: 600px;width:120%;margin-left: 50px;"></div></div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios';
import {GetTestData,GetAllPoint,GetCurve
} from '@/api/satellite-api'
export default {data() {return {activeIndex: -1,selectedPointIndex: -1,selectedRowIndex: -1,selectedRow: null,selectedPoint: null,pointname: '',createTime: '',curveid: '',rowid: '',actvie: '',curveData: [],tableData: [],pointData: [],multipleSelection: []}},mounted() {this.point()this.GetFile()},methods: {actvied(index) {this.activeIndex = indexconsole.log(this.active);},handlePointClick(index) {this.selectedPoint = this.pointData[index];this.selectedPointIndex = index;this.curveid = this.selectedPoint.id;this.createTime = this.selectedPoint.createTime;this.pointname = this.selectedPoint.pointname;this.qux();},// 获取文件async GetFile() {const data = await GetTestData(this.$route.query.id)this.tableData = data.data.data},// 获取测点async point() {if (this.pointData = []) {const data = await GetAllPoint(153)this.pointData = data.data.data} else {const data = await GetAllPoint(this.rowid)this.pointData = data.data.data}},// 获取曲线async qux() {const data = await GetCurve(this.curveid, this.createTime);this.curveData = data.data.data;// 转换数据格式const chartData = this.curveData.map(item => [item.x, item.y]);this.$nextTick(() => {// Initialize myChart variableconst myChart = echarts.init(this.$refs.chart);// 使用echarts方法替换数据myChart.setOption({title: {text: this.pointname,left: '1%'},tooltip: {trigger: 'axis'},grid: {left: '5%',right: '15%',bottom: '10%'},xAxis: {data: chartData.map(function (item) {return item[0];})},yAxis: {axisLabel: {formatter: function (value) {return value.toExponential();}}},toolbox: {right: 10,feature: {dataZoom: {yAxisIndex: 'none'},restore: {},saveAsImage: {}}},dataZoom: [{startValue: '2014-06-01'},{type: 'inside'}],visualMap: {top: 50,right: 10,pieces: [{gt: 0,lte: 50,color: '#93CE07'},{gt: 50,lte: 100,color: '#FBDB0F'},{gt: 100,lte: 150,color: '#FC7D02'},{gt: 150,lte: 200,color: '#FD0100'},{gt: 200,lte: 300,color: '#AA069F'},{gt: 300,color: '#AC3B2A'}],outOfRange: {color: '#999'}},series: {name: this.pointname,type: 'line',data: chartData.map(function (item) {return item[1];}),markLine: {silent: true,lineStyle: {color: '#333'},data: [{yAxis: 50},{yAxis: 100},{yAxis: 150},{yAxis: 200},{yAxis: 300}]}}});});}}
}
</script><style>
.el-table {cursor: pointer;
}
.el-table__header-wrapper {position: sticky;top: 0;z-index: 1;
}
.el-table__body-wrapper {max-height: 621px;overflow-y: scroll;position: relative;
}
.highlight-row {background-color: #fff !important;
}
.condition {background-color: #fff;position: relative;width: 600px;height: 450px;display: flex;flex-direction: column;align-items: center;border: 1px solid #ccc;padding: 0px;border-radius: 5px;.top {width: 100%;height: 40px;line-height: 40px;font-size: 15px;text-align: center;color: #5e5f5f;background-color: #d7e9f9;position: sticky;top: 0;z-index: 1;}.bottom {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: flex-start;}.item {display: flex;justify-content: center;align-items: center;width: 100%;height: 40px;line-height: 40px;font-size: 15px;text-align: center;padding: 5px;cursor: pointer;color: #5e5f5f;border-top: 1px solid #ccc;}.color {width: 100%;height: 40px;border: 1px solid ccc;line-height: 40px;font-size: 15px;text-align: center;background-color: #eaf4ff;}
}
.test {margin-left: 10px;background-color: #fff;position: relative;width: 400px;height: 450px;display: flex;flex-direction: column;align-items: center;border: 1px solid #ccc;padding: 0px;border-radius: 5px;.bottom1 {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: flex-start;overflow-y: scroll;}.top1 {width: 100%;height: 40px;line-height: 40px;font-size: 15px;text-align: center;color: #5e5f5f;background-color: #d7e9f9;position: sticky;top: 0;z-index: 1;}.item1 {display: flex;justify-content: center;align-items: center;width: 100%;height: 40px;line-height: 40px;font-size: 15px;text-align: center;padding: 5px;cursor: pointer;color: #5e5f5f;border-top: 1px solid #ccc;}.color1 {width: 100%;height: 40px;border: 1px solid ccc;line-height: 40px;font-size: 15px;text-align: center;background-color: #eaf4ff;}
}</style>