使用v-for 循环 数组productInfoLis 中的对象 在elementUI的el-table-column组件下

可以这样写：

<el-table :data="productInfoList">
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="price" label="价格"></el-table-column>
  <el-table-column prop="stock" label="库存"></el-table-column>
  <el-table-column prop="description" label="描述"></el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button @click="handleEdit(scope.row)">编辑</el-button>
      <el-button @click="handleDelete(scope.row)">删除</el-button>
    </template>
  </el-table-column>
</el-table>

其中，`productInfoList` 是你的数组名称，`prop` 属性指向对象中的属性名，`label` 属性用于表头的显示，`slot-scope="scope"` 表示作用域插槽，可以访问当前行的数据，`handleEdit` 和 `handleDelete` 是你自己定义的方法，用于处理编辑和删除操作。

相关问题

在elementUI的el-table-column组件下使用v-for 循环 数组productInfoLis 中的对象

可以通过使用 `v-for` 循环遍历数组 `productInfoLis` 中的对象，然后在 `el-table-column` 组件中使用对象的属性作为列的数据源。

例如：

<template>
  <el-table :data="productInfoLis">
    <el-table-column v-for="(item, index) in productInfoLis" :key="index" :label="item.name">
      <template slot-scope="scope">
        {{ item[scope.column.property] }}
      </template>
    </el-table-column>
  </el-table>
</template>

在上面的示例中，我们使用 `v-for` 循环遍历了 `productInfoLis` 数组中的每一个对象，然后在 `el-table-column` 组件中使用 `item.name` 作为列的标签名，并且通过 `scope.column.property` 获取列对应的属性名，最后通过 `item[scope.column.property]` 获取该属性的值，显示在表格中。

el-table-column循环数组

### 回答1：
el-table-column可以通过v-for循环数组来动态生成列。

例如，我们有一个数组data，包含了表格中的数据，我们可以通过以下代码来动态生成表格列：

<el-table :data="data">
  <el-table-column v-for="(item, index) in columns" :key="index" :prop="item.prop" :label="item.label"></el-table-column>
</el-table>

其中，columns是一个数组，包含了每一列的属性和标签，例如：

columns: [
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'gender', label: '性别' }
]

这样就可以根据columns数组动态生成表格列了。

### 回答2：
el-table-column是Element UI中的一个表格组件，可以方便的创建表格列以及定义表格的样式和功能。在进行表格列的创建时，很多情况下表格列的数量可能是不确定的，并且需要从一个数组中进行遍历生成。这时就需要使用循环来实现。

在Vue中使用el-table组件生成表格时，可以通过v-for指令来循环数组生成表格列。具体操作如下：

1. 首先需要引入el-table-column组件。可以在Vue实例中全局引入，也可以在单个组件中引入。

import { ElTable, ElTableColumn } from 'element-ui';

Vue.component('el-table', ElTable);
Vue.component('el-table-column', ElTableColumn);

2. 然后在模板中使用v-for指令来循环生成表格列。在v-for指令中，要使用当前循环元素作为el-table-column的prop属性名。

<template>
<el-table :data="tableData">
<el-table-column v-for="item in tableColumns" :prop="item.prop" :label="item.label">
</el-table-column>
</el-table>
</template>

3. 在Vue实例中定义tableData和tableColumns这两个变量，并将它们传递给el-table组件的props。

<script>
export default {
data() {
return {
// 表格数据
tableData: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 21, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
{ name: '赵六', age: 23, gender: '女' },
],

// 表格列
tableColumns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' }
]
}
}
}
</script>

4. 最终生成的表格就会自动根据表格列的数量进行循环，并显示出相应的表格列。

通过以上步骤，就可以实现el-table-column循环数组的操作。这种方法不仅可以用在表格列的循环中，还可以用在其他需要循环生成元素的场景中，具有很好的扩展性和灵活性。

### 回答3：
关于el-table-column循环数组的问题，我们需要首先了解el-table组件和el-table-column组件的基本用法。el-table是Element-UI中的表格组件，而el-table-column是el-table中的列组件。当我们使用el-table组件时，需要为表格指定一个columns属性，其中包含多个el-table-column组件，用于创建表格的列。

现在，我们需要在el-table-column组件中使用v-for指令来循环数组。首先，我们需要将要循环的数组放在data中，然后在el-table-column组件中使用v-for指令，来动态创建多个列。具体代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="(item,index) in columns"
      :label="item.label"
      :key="index"
      :prop="item.prop"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [ // 待循环的数组
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      tableData: [ // 表格数据
        {
          name: '小明',
          age: 18,
          address: '北京市'
        },
        {
          name: '小红',
          age: 20,
          address: '上海市'
        },
        {
          name: '小刚',
          age: 22,
          address: '广州市'
        }
      ]
    }
  }
}
</script>

在上述代码中，我们在el-table-column组件中使用v-for指令来循环columns数组，然后将每个数组元素的label属性绑定到列的label属性上，将prop属性绑定到列的prop属性上。这样，就动态创建了多个列，实现了循环数组的效果。

最后，需要注意的是，在循环数组时，每个元素都需要有一个唯一的key属性来标识，以便Vue能够正确地渲染列表。在上述代码中，我们使用了index作为key属性。但是，在实际开发中，最好使用一个能够唯一标识每个元素的属性作为key属性。