获取elementui表格指定一列数据

要获取 ElementUI 表格中的指定一列数据，可以使用以下方法：

1. 在表格组件中设置 prop 属性为需要获取的列的字段名，例如：

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

2. 在 Vue 实例中，通过 `$refs` 属性获取表格组件的引用，然后调用其 `store.states.data` 属性获取表格数据，再通过 `map` 方法获取指定列的数据，例如：

const tableData = this.$refs.table.store.states.data.map(item => item.name)

这样可以获取表格中所有行的姓名数据。如果要获取其他列的数据，只需要将 `prop` 属性改为相应的字段名即可。

相关问题

获取elementui表格指定一列数据用于handbook折线图数据

好的，您可以按照以下步骤来获取element-ui表格中指定一列数据：

1. 首先，您需要在表格组件中指定表格列的 prop 属性，例如：

<el-table :data="tableData">
  <el-table-column prop="columnData" label="Column Data"></el-table-column>
</el-table>

其中，prop 属性为表格列对应的数据在表格数据中的属性名，label 属性为表格列的标题。

2. 在组件中，您可以通过 $refs 来获取表格组件的实例。例如：

<template>
  <div>
    <el-table :data="tableData" ref="table">
      <el-table-column prop="columnData" label="Column Data"></el-table-column>
    </el-table>
    <button @click="getChartData">Get Chart Data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { columnData: 10 },
        { columnData: 20 },
        { columnData: 30 },
        { columnData: 40 },
        { columnData: 50 }
      ]
    };
  },
  methods: {
    getChartData() {
      const columnData = this.$refs.table.store.states.data.map(item => item.columnData);
      console.log(columnData); // 输出表格中 columnData 列的数据数组
    }
  }
};
</script>

通过 $refs.table.store.states.data 可以获取到表格中的所有数据，然后使用 map 方法获取到 columnData 列的数据数组。

3. 在获取到数据后，您可以将其传递给您的 handbook 折线图组件进行使用。

获取elementui表格某一列数据

如果你需要获取 ElementUI 表格中的某一列数据，可以按照以下步骤进行操作：

1. 给 `<el-table-column>` 标签绑定 `prop` 属性，该属性的值为该列数据在表格数据源中对应的属性名称。

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

2. 在方法中使用 `map` 函数获取表格数据源中的指定属性的值组成的数组。

methods: {
  getColumnData(prop) {
    return this.tableData.map(item => item[prop]);
  }
}

其中，`getColumnData` 方法接受一个参数 `prop`，表示需要获取的表格列对应的属性名称。

3. 在模板中调用 `getColumnData` 方法，传入需要获取的列对应的 `prop` 值即可获取该列数据的数组。

<template>
  <div>
    <div>姓名：{{ getColumnData('name').join(', ') }}</div>
    <div>年龄：{{ getColumnData('age').join(', ') }}</div>
  </div>
</template>

以上代码仅供参考，具体实现方式可能因项目而异。