循环生成的el-table-column怎么将值取出来

如果您想从循环生成的 `el-table-column` 中获取值，可以通过 `scoped-slot` 的方式进行操作。具体步骤如下：

1. 在 `el-table-column` 中使用 `scoped-slot`，并将其命名为 `default`。

<el-table-column label="姓名">
  <template slot-scope="scope">
    {{ scope.row.name }}
  </template>
</el-table-column>

2. 在表格组件中监听 `cell-click` 事件，并在事件处理程序中获取当前行和列的值。

<el-table :data="data" @cell-click="handleCellClick">
  <!-- 循环生成的 el-table-column -->
</el-table>

...

methods: {
  handleCellClick(row, column, event) {
    console.log('当前行的姓名为：', row.name);
    console.log('当前列的标签为：', column.label);
  }
}

在上面的代码中，`handleCellClick` 方法可以获取当前行和列的值，从而实现对循环生成的 `el-table-column` 中的值的取出。

相关问题

el-table 使用for循环生成el-table-column，请使用代码示例

下面是一个使用 for 循环生成 el-table-column 的示例代码：

<template>
  <el-table :data="tableData">
    <!-- 使用 v-for 循环生成 el-table-column -->
    <el-table-column
      v-for="(column, index) in tableColumns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :sortable="column.sortable"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Mike', age: 25 },
        { id: 3, name: 'Mary', age: 30 }
      ],
      tableColumns: [
        { prop: 'id', label: 'ID', width: 80, sortable: true },
        { prop: 'name', label: 'Name', width: 120, sortable: true },
        { prop: 'age', label: 'Age', width: 80, sortable: true }
      ]
    };
  }
};
</script>

在上述示例中，使用 v-for 循环遍历 `tableColumns` 数组生成了三个 el-table-column 标签，分别对应表格的 ID、Name 和 Age 三列。在 el-table-column 标签中，使用了 `:prop`、`:label`、`:width` 和 `:sortable` 等属性来设置每一列的属性。最终生成的表格如下所示：

| ID | Name | Age |
| -- | ---- | --- |
| 1 | John | 20 |
| 2 | Mike | 25 |
| 3 | Mary | 30 |

el-table 使用for循环生成el-table-column，且for循环内嵌套if，请使用代码示例

以下是一个示例代码，使用`v-for`循环生成`el-table-column`，并在循环内使用`v-if`条件判断是否需要显示该列：

<el-table :data="tableData">
  <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" :prop="item.prop" v-if="item.visible">
    <!-- 自定义内容 -->
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [
        { label: '姓名', prop: 'name', visible: true },
        { label: '年龄', prop: 'age', visible: false },
        { label: '性别', prop: 'gender', visible: true },
      ]
    };
  },
  // ...
};
</script>

在上述示例中，`columns`数组是用于循环生成`el-table-column`的数据源，其中每个元素包含三个属性：

- `label`：列的标题；
- `prop`：列对应`data`数据源中的属性名；
- `visible`：控制该列是否显示的布尔值。

通过在`v-for`循环中使用`v-if`条件判断`item.visible`来决定是否显示该列。