在el-table中根据判断不同值显示对应文本

后端传来的数据是数据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