vue 用document写一个按钮点击前是el-col一个样式点击后是另外el-col一个样式

您可以使用 `document.querySelector` 方法来获取按钮元素，然后在按钮的点击事件中切换其所在的 `el-col` 的样式。

以下是一个示例代码：

<template>
  <el-row>
    <el-col :class="btnClass" @click="toggleBtnClass">
      <el-button>Click me</el-button>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      btnClass: "before-click-class",
    };
  },
  methods: {
    toggleBtnClass() {
      const elCol = document.querySelector(".el-col");
      if (this.btnClass === "before-click-class") {
        this.btnClass = "after-click-class";
        elCol.classList.add("after-click-class");
        elCol.classList.remove("before-click-class");
      } else {
        this.btnClass = "before-click-class";
        elCol.classList.add("before-click-class");
        elCol.classList.remove("after-click-class");
      }
    },
  },
};
</script>

在上面的代码中，我们在 `el-col` 元素上绑定了一个 `class` 属性，其值为 `btnClass`。我们初始化 `btnClass` 为 `before-click-class`，表示按钮未被点击时的样式。当按钮被点击时，我们切换 `btnClass` 的值为 `after-click-class`，表示按钮被点击后的样式。同时，我们也在 `el-col` 元素的样式中添加了两个类名 `before-click-class` 和 `after-click-class`，分别对应按钮未被点击时和被点击后的样式。在 `toggleBtnClass` 方法中，我们使用 `document.querySelector` 方法获取了 `el-col` 元素，并在其中切换了样式类名。