el-table-column每行生成一个二维码

为了在el-table-column中的每行生成一个二维码，您可以使用Vue.js和qrcode.js库来实现。以下是一个示例代码：

<template>
  <el-table :data="tableData">
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="Name" prop="name"></el-table-column>
    <el-table-column label="QR Code">
      <template slot-scope="scope">
        <div class="qrcode-container" ref="qrcode"></div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import QRCode from 'qrcode'

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John' },
        { id: 2, name: 'Jane' },
        { id: 3, name: 'Bob' }
      ]
    }
  },
  mounted() {
    this.generateQRCode()
  },
  methods: {
    generateQRCode() {
      this.tableData.forEach(data => {
        QRCode.toCanvas(this.$refs.qrcode[data.id - 1], data.id.toString())
      })
    }
  }
}
</script>

<style>
.qrcode-container {
  width: 100px;
  height: 100px;
}
</style>

在上面的示例代码中，我们在第三列中使用了一个插槽来渲染生成的二维码。我们使用ref属性在每个二维码容器上创建了一个引用，然后在组件挂载时使用qrcode.js库生成了二维码，并将其绘制到每个容器中。由于我们保存了每个容器的引用，因此可以在需要时轻松地更新二维码。