el-table存放数据

el-table是Element UI中的一个表格组件，可以用来展示数据。在el-table中存放数据需要通过data属性来指定数据源，例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

其中，tableData是一个数组，每个元素代表一行数据，每个元素的属性名对应着el-table-column中的prop属性。

相关问题

<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容器中，根据选中的数据来显示相应的内容。

希望对您有帮助！

<el-tabs v-model="activeName" class="demo-tab"> <el-tab-pane label="检测到的目标" name="first" class="item"> <!-- 表格存放特征值 --> <el-table :data="feature_list" height="390" border style="width: 750px; text-align: center" v-loading="loading" element-loading-text="数据正在处理中，请耐心等待" element-loading-spinner="el-icon-loading" lazy > <el-table-column label="目标类别" width="250px"> <template slot-scope="scope"> <span>{{ scope.row[2] }}</span> </template> </el-table-column>

这段代码是一个 Vue 组件，使用了 Element UI 的 Tabs、TabPane 和 Table 组件来显示检测到的目标的特征值。

el-tabs 组件用来创建一个选项卡，可以在不同的选项卡之间切换，其中 v-model="activeName" 表示当前选中的选项卡的名称。

el-tab-pane 组件用来创建一个选项卡面板，每个面板可以包含一个 Table 组件，用来显示目标的特征值。

el-table 组件用来创建一个表格，其中 :data="feature_list" 表示表格数据来自 Vue 实例中的 feature_list 属性，height="390" 表示表格高度，border 表示表格有边框，style="width: 750px; text-align: center" 表示表格样式，v-loading="loading" 表示表格数据正在加载中，element-loading-text="数据正在处理中，请耐心等待" 表示加载时的提示文本，element-loading-spinner="el-icon-loading" 表示加载时的图标，lazy 表示表格启用懒加载。而 el-table-column 组件用来创建表格列，其中 label="目标类别" 表示列标题，width="250px" 表示列宽度，slot-scope="scope" 表示列插槽的作用域，scope.row[2] 表示当前行的第 3 列数据（下标从 0 开始），因此是目标类别的值。