vue 动态控制button按钮颜色及内容_vue button 判断颜色-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45669668/article/details/109808593

本文介绍如何在Vue中根据后端数据动态生成不同类型的button按钮，包括断开和闭合两种状态，并实现按钮颜色的控制。通过处理DOM元素，结合函数实现按钮状态的改变，点击按钮时触发表格刷新功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求 —
根据后端数据，动态渲染button按钮个数，且分为两种不同类型按钮（断开、闭合）

dom部分

          <el-table-column label="控制">
            <template slot-scope="scoped">
              <el-dropdown>
                <span class="el-dropdown-link">
                  点击操作
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in outInfo" :key="item.id" ref="dowmItem">
                    <span>{{item.outName}}</span>
                    <span>
                      <el-button
                        plain
                        size="small"
                        :type="buttonType(item.btnMark)"
                        @click="controlEquitment(item.outNO,scoped.row.code,scoped.row.vpncode,scoped.row.id)"
                      >{{item.btnMark?'闭 合':'断 开'}}</el-button>
                    </span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>

获取节点信息并处理

    jd_getNodeInfo () {
      // console.log('继电器节点信息')
      jd_idCheck({ "id": this.equipmentID }).then(res => {
        if (res.code == 200) {
          this.jd_ID_INdata.push(res.data.INInfo)
          this.outInfo = res.data.outInfo
          this.outInfo.map(item => {
            if (this.markArr.includes(item.outNO)) {    // 自定义的  markArr = [1,3,5]   ，与item.outNO做对比，有对应数值返回true
              item.btnMark = true
              item.btnName = '闭 合'
              // this.btnMark = true
            } else {
              item.btnMark = false
              item.btnName = '断 开'
            }
            // console.log(item)
          })
          setTimeout(() => {
            this.equipmentLoading = false
          }, 500)
        } else {
          this.equipmentLoading = false
        }
      })
    },

按钮颜色处理函数

    // 判断按钮颜色
    buttonType (val) {
      // console.log('按钮颜色-----', val)
      if (val) {
        return "success"
      } else {
        return "danger"
      }
    },

点击控制后表格刷新

    // 控制输出路径
    controlEquitment (num, code, vpnCode, id) {
      // console.log(num, code, vpnCode)
      console.log(this.outInfo)
      this.equipmentLoading = true
      this.jd_ID_INdata.length = 0
      this.outInfo.length = 0
      let data = {
        "num": num,
        "code": code,
        "VPNCode": vpnCode
      }
      //控制接口
      jd_controll(data).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.jd_getNodeInfo()   
          setTimeout(() => {
            this.equipmentLoading = false
            this.$message({
              message: res.message,
              type: 'success'
            });
          }, 500)

        } else {
          this.equipmentLoading = false
          this.$message({
            message: res.message,
            type: 'warning'
          });
        }
      })
    },