后端傳來的數據是數據0，1，2。0代表js報錯，1代表白屏，2代表其他錯誤，要求動態顯示在表格中

 <el-table-column align="center" prop="errorText" label="異常類型" width="150">
	<template slot-scope="{row: {errorText}}">
		<span v-if="+errorText === 0">js報錯</span>
        <span v-else-if="+errorText === 1">白屏</span>
        <span v-else>其他錯誤</span>
    </template>
</el-table-column>

知識點

slot-scope="{row: {errorText}}" 相當于用slot-scope="{data}"分解出該作用域里的errorText，后面直接使用即可
+errorText，把errorText轉為數字進行全等比較，不使用==是為了避免出錯，根據項目需求調整

參考：https://blog.csdn.net/weixin_42557996/article/details/95663194

2022.3.25更新：

CSDN現在這個文章質量提示真的很蛋疼，以前還是小白的時候隨手寫的一個插槽分享我還能碼多少字？現在回頭看發現了個寫錯的地方要改改還得加字數就離譜，隨便貼一串代碼吧，以下的可以不看

<template>
  <div class="drag">
    <div class="back_box" ref="back_box">
      這是一個背景
      <div
        class="drag_box"
        draggable="true"
        @dragstart="dragstart"
        @dragend="dragend"
        @wheel="handleWeel"
        :style="`left:${elLeft}px;top:${elTop}px;width:${elWidth}px;height:${elHeight}px;`"
      >
        <div
          class="text"
          :style="`left:${(0 * this.elWidth) / 100}px;top:${
            (25 * this.elHeight) / 100
          }px;-webkit-transform: scale(${meter_zoom} )`"
        >
          這是一個藍色可拖拽元素
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      initWidth: 0, // 父元素的寬-自適應值
      initHeight: 0, // 父元素的高-自適應值
      startclientX: 0, // 元素拖拽前距離瀏覽器的X軸位置
      startclientY: 0, //元素拖拽前距離瀏覽器的Y軸位置
      elLeft: 0, // 元素的左偏移量
      elTop: 0, // 元素的右偏移量

      zoom: 1, // 縮放比例
      elWidth: 0, // 元素寬
      elHeight: 0, // 元素高
      meter_zoom: 0, // 子元素縮放比例
    };
  },
  methods: {
    // 頁面初始化
    initBodySize() {
      this.initWidth = this.$refs.back_box.clientWidth; // 拿到父元素寬
      // this.initHeight = this.initWidth * (1080 / 1920);
      this.initHeight = this.initWidth * ((1080 * 0.88) / (1920 - 1080 * 0.02)); // 根據寬計算高實現自適應
      this.elWidth = this.initWidth * (100 / (1920 / 2));
      this.elHeight = this.initHeight * (100 / (1080 / 2));
      this.meter_zoom = this.elWidth / 100; // 計算子元素縮放比例
    },
    // 拖拽開始事件
    dragstart(e) {
      console.log(e);
      this.startclientX = e.clientX; // 記錄拖拽元素初始位置
      this.startclientY = e.clientY;
    },
    // 拖拽完成事件
    dragend(e) {
      console.log(e);
      let x = e.clientX - this.startclientX; // 計算偏移量
      let y = e.clientY - this.startclientY;
      this.elLeft += x; // 實現拖拽元素隨偏移量移動
      this.elTop += y;
    },

    // 滾輪放大縮小事件
    handleWeel(e) {
      console.log(e);
      if (e.wheelDelta < 0) {
        this.zoom -= 0.05;
      } else {
        this.zoom += 0.05;
      }
      if (this.zoom >= 3) {
        this.zoom = 3;
        return;
      }
      if (this.zoom <= 0.5) {
        this.zoom = 0.5;
        return;
      }

      this.elWidth = this.initWidth * (100 / (1920 / 2)) * this.zoom;
      this.elHeight = this.initHeight * (100 / (1080 / 2)) * this.zoom;
      this.meter_zoom = this.elWidth / 100;
    },
  },
  mounted() {
    // console.log(this.$el);
    this.initBodySize();
  },
};
</script>

<style scoped>
.back_box {
  background: #ccc;
  width: 50vw;
  height: 50vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
}

.drag_box {
  width: 100px;
  height: 100px;
  background: skyblue;
  position: absolute;
  z-index: 10;
  user-select: none; /* 不可選中,為了拖拽時不讓文字高亮 */
}

.text {
  position: absolute;
  width: 100px;
  height: 100px;
  transform-origin: 0 0; /* 用作縮放基點 */
  font-size: 16px;
}
</style>

THX