<el-table :data="tableCharaData" style="width: 560px; margin-top: 15px;" :header-row-class-name="setRowClassName" @row-click="handleRowClick"> handleRowClick中this.ImgState = !this.ImgState，怎么控制点击不同行时切换显示，重复点击同一行时关闭显示

你的问题是如何控制在点击不同行时切换显示，但是重复点击同一行时关闭显示。

你可以在 `handleRowClick` 方法中添加判断语句，比如判断当前点击的行是否与上一次点击的行相同。如果相同，则将 `ImgState` 置为 false，关闭显示；如果不同，则将 `ImgState` 置为 true，切换显示。可以参考下面的代码实现：

methods: {
  handleRowClick(row) {
    if (row === this.currentRow) {
      this.ImgState = !this.ImgState; // 重复点击同一行时关闭显示
    } else {
      this.currentRow = row; // 记录当前点击的行
      this.ImgState = true; // 切换显示
    }
  }
}

在这个例子中，我们使用一个 `currentRow` 变量来记录当前点击的行。当点击不同的行时，我们将 `currentRow` 更新为当前点击的行，并将 `ImgState` 置为 true，切换显示。当重复点击同一行时，我们只需要将 `ImgState` 置为 false，关闭显示即可。

相关问题

<el-table :data="tableCharaData" style="width: 560px; margin-top: 15px;" :header-row-class-name="setRowClassName"> <el-table-column prop="core" label="指标" width="140" :show-overflow-tooltip='true'> </el-table-column> <el-table-column prop="target" label="目标值" width="70"> </el-table-column> <el-table-column prop="finish" label="完成值" width="70"> </el-table-column> <el-table-column prop="finishRate" label="完成率%" width="80"> </el-table-column> </el-table>怎么使用table中每行不同的数据显示echarts图表

你可以在表格中添加一个自定义的插槽，然后在插槽中使用echarts来绘制图表。具体步骤如下：

1. 在表格中添加一个自定义的插槽。例如，在el-table-column中添加一个template属性：

<el-table-column label="图表">
  <template slot-scope="scope">
    <div class="chart-container" ref="chartContainer"></div>
  </template>
</el-table-column>

2. 在插槽中使用echarts来绘制图表。你需要在插槽所在的组件中引入echarts，并在mounted钩子函数中初始化echarts实例。然后，你可以在插槽中使用这个实例来绘制图表。例如：

import echarts from 'echarts'

export default {
  data() {
    return {
      chartInstance: null
    }
  },
  mounted() {
    this.chartInstance = echarts.init(this.$refs.chartContainer)
  },
  methods: {
    drawChart(data) {
      // 使用echarts实例绘制图表
      this.chartInstance.setOption({
        // ...
      })
    }
  }
}

3. 在表格的data属性中添加数据，并在插槽中调用drawChart方法来绘制每行不同的图表。例如：

<el-table :data="tableData">
  <!-- ... -->
  <el-table-column label="图表">
    <template slot-scope="scope">
      <div class="chart-container" ref="chartContainer" @click="drawChart(scope.row.chartData)"></div>
    </template>
  </el-table-column>
</el-table>

在这个例子中，每行的数据中都包含了一个chartData属性，它是用来绘制图表的数据。当用户点击每行的图表时，会调用drawChart方法，并传入该行的chartData数据来绘制图表。

<div class="bottomTable" v-show="coreState"> <el-table :data="tableCharaData" style="width: 560px; margin-top: 15px;" :header-row-class-name="setRowClassName" @row-click="handleRowClick"> <el-table-column prop="core" label="指标" width="140" :show-overflow-tooltip='true'> </el-table-column> <el-table-column prop="target" label="目标值" width="70"> </el-table-column> <el-table-column prop="finish" label="完成值" width="70"> </el-table-column> <el-table-column prop="finishRate" label="完成率%" width="80"> </el-table-column> </el-table> </div> <div class="chart-container" id="chart"> </div> tableData: [{ core: '投资额（亿元）', target: '363.7', finish: '94.8', finishRate: '30' }, 实现功能：点击table不同行时，显示div容器并更新里面的数据为改行内容，给我完整的代码

好的，根据您提供的代码，可以如下实现您的需求：

<template>
  <div>
    <div class="bottomTable" v-show="coreState">
      <el-table :data="tableCharaData" style="width: 560px; margin-top: 15px;" :header-row-class-name="setRowClassName" @row-click="handleRowClick">
        <el-table-column prop="core" label="指标" width="140" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="target" label="目标值" width="70"></el-table-column>
        <el-table-column prop="finish" label="完成值" width="70"></el-table-column>
        <el-table-column prop="finishRate" label="完成率%" width="80"></el-table-column>
      </el-table>
    </div>
    <div class="chart-container" id="chart">
      <p>指标：{{ selectedData.core }}</p>
      <p>目标值：{{ selectedData.target }}</p>
      <p>完成值：{{ selectedData.finish }}</p>
      <p>完成率：{{ selectedData.finishRate }}%</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coreState: false, // 初始时不显示chart容器
      tableCharaData: [
        {
          core: '投资额（亿元）',
          target: '363.7',
          finish: '94.8',
          finishRate: '30'
        },
        // 其他数据
      ],
      selectedData: {} // 用于存放选中的table行数据
    };
  },
  methods: {
    setRowClassName({ row }) {
      // 设置选中行的样式
      return row === this.selectedData ? 'selected-row' : '';
    },
    handleRowClick(row) {
      // 点击table行时触发
      this.coreState = true; // 显示chart容器
      this.selectedData = row; // 更新选中的数据
    }
  }
};
</script>

<style>
.selected-row {
  background-color: #f5f5f5;
}
</style>

在这段代码中，我们根据您提供的代码进行了一些修改，主要包括：

1. 添加了一个`selectedData`对象，用于存放选中的table行数据；
2. 在`handleRowClick`方法中，当点击table行时，将`coreState`设为`true`，显示chart容器，并将当前选中的行数据存放在`selectedData`对象中；
3. 在`setRowClassName`方法中，根据当前行是否为选中的行来设置样式；
4. 在chart容器中，根据选中的数据来显示相应的内容。

希望对您有帮助！