草庐IT

关于 Element-UI 按钮组（el-button-group）实现点击其中一个按钮，禁用其它按钮，以及改变状态列的文字和颜色的实现方式

小周前端 2023-07-27 原文

在使用 VUE + Element-UI 开发项目的时候，遇到了这样一个需求：


在使用el-table表格渲染数据的时候，有一个 “状态” 列和一个 “动作” 列。

当后端传递给我们当前行的 status = 1 的时候，状态列文字为可用（绿色），中间按钮显示为 “过期”；
当 status = 2 的时候状态列文字为禁用（红色），中间按钮显示为 “生效”，且 “编辑” 和 “删除” 按钮为禁用状态。
并且，需要在点击中间按钮的时候，在这两种状态之间进行切换。

实现思路：

  1. 用 el-table-column 循环渲染数据时，不要将 状态列 和 动作列 循环进去；将 状态列 单独抽离出来，写在倒数第二列，动作列 写在倒数第一列
  2. 通过 <template slot-scope="scope"> 获取到当前行的值，在 状态列 中，放置一个 div，并且给 div 动态绑定一个 style 属性：:style="{ color: scope.row.status =='1' ? 'green' : 'red' }"；再通过插值语法，在 div 根据 status 的值来判断显示 可用 还是 禁用：{{ scope.row.status== '1' ? '可用' : '禁用' }}，这样，状态列 就完成了
  3. 对于 动作列 来说，也是通过 <template slot-scope="scope"> 获取到当前行的值，然后通过 el-button 的 :disabled 属性，动态绑定一个三元表达式来判断 编辑 和 删除 是否禁用： :disabled="scope.row.status == '1' ? false : true"，过期 和 生效 的动态切换也是同理。

完整HTML代码

          <template v-for="item in listTitle">
            <el-table-column
              :key="item.key"
              :column-key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"/>
          </template>

          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <div :style="{ color: scope.row.status =='1' ? 'green' : 'red' }">
                {{ scope.row.status== '1' ? '可用' : '禁用' }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="动作">
            <template slot-scope="scope">
              <el-button-group>
                <el-button :disabled="scope.row.status == '1' ? false : true">编辑</el-button>
                <el-button @click="rowOverdue(scope.row)">{{ scope.row.status == '1' ? '过期' : '生效' }}</el-button>
                <el-button :disabled="scope.row.status == '1' ? false : true">删除</el-button>
              </el-button-group>
            </template>
          </el-table-column>

点击 “过期” / “生效” 触发的函数代码

这里需要根据每个人自己的不同需求来进行书写，我只贴了我自己的部分代码
rowOverdue：点击中间按钮触发的函数
overDueForm：后端需要你传递过去的值
overdue：后端提供的改变 status 值的接口

    rowOverdue(row) {
      let overDueForm = {
        id: row.id,
        status: row.status
      }
      
      // 改变 status 值的接口
      overdue(overDueForm).then(res => {
        ****
      })
    },

总结：

本质上都是通过 <template slot-scope="scope"> 来获取到当前行的值，然后再利用 三元表达式 来进行判断，根据需求显示不同的东西。

el-button-groupElement-UIspanclasstokenvue.jsjavascriptelementui

有关关于 Element-UI 按钮组（el-button-group）实现点击其中一个按钮，禁用其它按钮，以及改变状态列的文字和颜色的实现方式的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby - 如何使用文字标量样式在 YAML 中转储字符串？ - 2

    我有一大串格式化数据(例如JSON)，我想使用Psychinruby​​同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解

  3. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  4. ruby-on-rails - 跳过状态机方法的所有验证 - 2

    当我的预订模型通过rake任务在状态机上转换时，我试图找出如何跳过对ActiveRecord对象的特定实例的验证。我想在reservation.close时跳过所有验证!叫做。希望调用reservation.close!(:validate=>false)之类的东西。仅供引用，我们正在使用https://github.com/pluginaweek/state_machine用于状态机。这是我的预订模型的示例。classReservation["requested","negotiating","approved"])}state_machine:initial=>'requested

  5. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征，我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现，但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  6. ruby - 字符串文字中的转义状态作为 `String#tr` 的参数 - 2

    对于作为String#tr参数的单引号字符串文字中反斜杠的转义状态，我觉得有些神秘。你能解释一下下面三个例子之间的对比吗？我特别不明白第二个。为了避免复杂化，我在这里使用了'd'，在双引号中转义时不会改变含义("\d"="d")。'\\'.tr('\\','x')#=>"x"'\\'.tr('\\d','x')#=>"\\"'\\'.tr('\\\d','x')#=>"x" 最佳答案 在tr中转义tr的第一个参数非常类似于正则表达式中的括号字符分组。您可以在表达式的开头使用^来否定匹配(替换任何不匹配的内容)并使用例如a-f来匹配一

  7. ruby - Net::HTTP 获取源代码和状态 - 2

    我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

  8. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色？所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

  9. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基

  10. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目：明明的随机数题目输入描述输出描述：示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od，od薪资待遇，od机试题清单华为OD机试真题大全，用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

随机推荐