使用JsBarcode el-table-column内生成条形码

Vue 2 写法：在 el-table 中使用 JsBarcode 生成简约条形码

以下是使用 Vue 2 和 Element UI 在 el-table 中生成简约条形码的完整实现：

安装依赖

npm install jsbarcode
# 或
yarn add jsbarcode

完整组件代码

vue

复制

下载

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="price" label="价格" width="100"></el-table-column>
      <el-table-column label="条形码" width="200">
        <template slot-scope="scope">
          <svg class="barcode" :ref="'barcode' + scope.$index"></svg>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import JsBarcode from 'jsbarcode';

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '商品A', price: '¥99.00', code: '6931234567890' },
        { id: 2, name: '商品B', price: '¥129.00', code: '6923456789012' },
        { id: 3, name: '商品C', price: '¥59.00', code: '6912345678901' },
        { id: 4, name: '商品D', price: '¥199.00', code: '6901234567890' },
      ]
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.generateBarcodes();
    });
  },
  methods: {
    generateBarcodes() {
      this.tableData.forEach((item, index) => {
        const barcodeRef = this.$refs['barcode' + index];
        if (barcodeRef) {
          // 简约风格配置
          JsBarcode(barcodeRef, item.code, {
            format: "CODE128",  // 条形码格式
            width: 1.5,         // 条宽度
            height: 50,        // 条高度
            displayValue: true,// 显示文本
            fontSize: 12,      // 文本大小
            margin: 5,         // 边距
            background: "#fff", // 白色背景
            lineColor: "#333",  // 深灰色条
            marginTop: 5,
            marginBottom: 5,
            marginLeft: 5,
            marginRight: 5
          });
        }
      });
    }
  },
  watch: {
    tableData: {
      handler() {
        this.$nextTick(() => {
          this.generateBarcodes();
        });
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.barcode {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.el-table {
  margin-top: 20px;
}
</style>

关键点说明

1. Vue 2 模板语法：

   • 使用 slot-scope="scope" 而不是 Vue 3 的 #default
   • 使用 :ref="'barcode' + scope.$index" 动态绑定 ref

2. JsBarcode 配置：

   • format: "CODE128" - 通用的条形码格式
   • width: 1.5 - 较细的条宽度，更简约
   • lineColor: "#333" - 使用深灰色而非纯黑，更柔和
   • 适当调整边距和字体大小

3. 响应式更新：

   • 添加了 watcher，当 tableData 变化时重新生成条形码
   • 使用 $nextTick 确保 DOM 更新完成后再生成条形码

4. 样式优化：

   • 条形码 SVG 设置为块级元素并居中
   • 限制最大宽度防止溢出

更简约的配置选项

如果需要更加简约的风格，可以修改 JsBarcode 配置：

JsBarcode(barcodeRef, item.code, {
  format: "CODE128",
  width: 1,
  height: 40,
  displayValue: false, // 不显示文本
  margin: 0,          // 无外边距
  lineColor: "#666",  // 更浅的灰色
  background: "transparent" // 透明背景
});

这样配置后，条形码将更加简洁，适合在紧凑的表格布局中使用。

vue3写法

（Vue 3 Composition API）

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column label="条形码">
      <!-- Vue 3 的模板语法：使用 `#default` 和动态 ref -->
      <template #default="{ row, $index }">
        <svg :ref="(el) => (barcodeRefs[$index] = el)"></svg>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import JsBarcode from "jsbarcode";

const tableData = ref([
  { name: "商品1", qrcode: "123456789" },
  { name: "商品2", qrcode: "987654321" },
]);

const barcodeRefs = ref([]);

// 生成条形码
const generateBarcodes = () => {
  nextTick(() => {
    barcodeRefs.value.forEach((svg, index) => {
      if (svg && tableData.value[index]) {
        JsBarcode(svg, tableData.value[index].qrcode, {
          format: "CODE128",
          width: 1.5,
          height: 50,
          displayValue: true,
          fontSize: 10,
          lineColor: "#333",
        });
      }
    });
  });
};

onMounted(generateBarcodes);
</script>