【element-ui】两个按钮控制同一块内容的显示和隐藏

Z时代
2024-01-10
分类：技术分享

问题描述

在一个表格中，有两个按钮可点击，控制表格的展开行的显示和隐藏，两个按钮可切换不同的内容

问题出现的环境背景及自己尝试过哪些方法

点击按钮1，再点击按钮2，切换不同的内容，div不隐藏，再点击按钮2时div隐藏，可是当我再点击按钮1时，没有反应，需要再点击一次才会显示内容

相关代码

<el-table-column label="状态" prop="release_status">
        <template slot-scope="props">
          <div class="release_status" @click="addExpand(props.row)">
            点我
          </div>
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="props">
          <div v-if="status === 0">
            <span>我是点我的内容</span>
          </div>
          <div v-else>
            <span>我是再点我的内容</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="trade_status">
        <template slot-scope="props">
          <div class="trade_status" @click="addAgainExpand(props.row)">
            再点我
          </div>
        </template>      </el-table-column>

methods方法：

    let flag = true
    let status = 1
    addExpand(row) {
      this.status = 0
      const $table = this.$refs.table
      if (flag) {
        $table.toggleRowExpansion(row, true)
        status = 1
      } else {
        if (status === 1) {
          $table.toggleRowExpansion(row, false)
          status = 2
        } else {
          $table.toggleRowExpansion(row, true)
          status = 1
        }
      }
      flag = !flag
    },
    addAgainExpand(row) {
      this.status = 1
      const $table = this.$refs.table
      if (!flag) {
        $table.toggleRowExpansion(row, true)
        status = 2
      } else {
        if (status === 2) {
          $table.toggleRowExpansion(row, false)
          status = 1
        } else {
          $table.toggleRowExpansion(row, true)
          status = 2
        }
      }
      flag = !flag    }