用计算函数动态调整el-col的span属性示例

可以使用计算属性来动态设置 el-col 的 span 属性。例如，如果需要在不同的屏幕尺寸下设置不同的 span 值，可以使用以下代码：

<template>
  <el-row>
    <el-col :span="colSpan"></el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      screenWidth: 0
    }
  },
  computed: {
    colSpan() {
      if (this.screenWidth < 768) {
        return 12
      } else {
        return 8
      }
    }
  },
  mounted() {
    this.screenWidth = window.innerWidth
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth
    }
  }
}
</script>

在上述代码中，我们使用了一个计算属性 colSpan 来根据屏幕尺寸动态计算 span 值。mounted 方法中监听了 resize 事件，调用 handleResize 方法来更新 screenWidth 的值，从而触发 colSpan 计算属性的重新计算。