<el-table :data="tableData" style="width: 500px; 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容器负责显示echarts,怎么点击table不同行时,显示div容器并更新里面的数据为改行内容
时间: 2024-03-20 10:43:04 浏览: 38
el-data-table:element基于element-ui,轻松实现结界
你可以在`handleRowClick`方法中获取当前点击的行数据,并将数据传递给负责显示 echarts 的组件。具体实现方式如下:
1. 在父组件中定义一个变量 `selectedRow`,用于存储当前选中的行数据。
```
data() {
return {
tableData: [], // 表格数据
selectedRow: null, // 当前选中的行数据
}
},
```
2. 在 `handleRowClick` 方法中更新 `selectedRow` 变量的值,并将其传递给负责显示 echarts 的子组件。
```
methods: {
handleRowClick(row) {
this.selectedRow = row
},
},
```
3. 在负责显示 echarts 的子组件中接收 `selectedRow` 变量,并在 `watch` 中监听其变化,更新 echarts 数据。
```
props: {
selectedRow: {
type: Object,
default: null,
},
},
watch: {
selectedRow() {
// 根据选中的行数据更新 echarts 数据
this.updateEchartsData(this.selectedRow)
},
},
```
这样就实现了在点击表格不同行时,显示 div 容器并更新里面的数据为该行内容的功能。
阅读全文