vue将 ＜el-table-column＞ 中的内容改为动态的_el-table-column 动态渲染列

<el-table-column label="未要求发货" align="center" prop="loom">
       <template slot-scope="scope">
         <div>
           <div>10</div>
           <div>20</div>
           <div>50</div>
           <div>70</div>
           <div>20</div>
         </div>
       </template>
      </el-table-column> 
1
2
3
4
5
6
7
8
9
10
11

改为动态的
要将 <el-table-column> 中的内容改为动态的，您可以使用数据来渲染该列的内容。在模板中，您可以使用 v-for 指令来遍历数据，并将每个数据项渲染为 <div> 元素。

以下是一个示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="未要求发货" align="center" prop="loom">
        <template slot-scope="scope">
          <div v-for="item in scope.row.loom" :key="item">{{ item }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { loom: [10, 20, 50, 70, 20] },
        { loom: [30, 40, 60, 80, 10] },
        { loom: [15, 25, 35, 45, 55] }
      ]
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上述示例代码中，我们将 tableData 数组中的每个元素的 loom 属性作为 <el-table-column> 中的内容进行渲染。我们使用 v-for 指令来遍历 scope.row.loom 数组，并将每个元素渲染为一个 <div> 元素。我们使用 :key 属性来指定每个 <div> 元素的唯一标识。

通过以上代码，每个表格行的 “未要求发货” 列都会根据相应的数据动态渲染出来。

希望以上信息对您有所帮助。如果您有任何其他问题，请随时提问。