vue中点击切换按钮功能之点启用后按钮变为禁用

实现方法分位三步:

  1. 在template中设置2个按钮,通过v-if ,v-show来控制;
  2. data中设置按钮的默认值;
  3. methods中控制点击按钮切换效果。
<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="200">
    </el-table-column>
     <el-table-column
      prop="state"
      label="状态"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
      <template slot-scope="scope">
            <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.姓名">
            </el-input>
            <span v-show="!scope.row.show">{{scope.row.姓名}}
            </span>
        </template>
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300"
       :show-overflow-tooltip="true" >
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button @click="scope.row.show =true" type="text" size="small">编辑</el-button>
        <el-button @click="scope.row.show =false" type="text" size="small">保存</el-button>
        <el-button @click="changeStatus" type="text" size="small" v-if="btnStatus == 0">启用</el-button>
        <el-button @click="changeStatus" type="text" size="small" v-show="btnStatus == 1">禁用</el-button>

      </template>

    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      },
      changeStatus(){
                this.btnStatus = this.btnStatus === 0 ? 1 : 0;
            }
    },

    data() {
      return {
          btnStatus: 0,
        tableData: [{
          date: '2016-05-02',

          name: '王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          show:true
        }, {
          date: '2016-05-04',

          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          show:true
        }]
      }
    }
}
</script>

另外,注意下,data中,按钮的默认值要放在data下,图1。

不能放在table中,否则会按钮显示不出来,且会报错,图2:Property or method "btnStatus" is not defined on the instance but referenced during render.

这个报错原因是:在template里面或者在方法里面使用了 “btnStatus” ,但是在data里面没有定义。

到此这篇关于vue中点击切换按钮功能之点启用后按钮变为禁用的文章就介绍到这了,更多相关vue点击切换按钮内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】

    最近公司的产品上线,一些高级功能在基础版本中不对用户开发,通过视频的形式展示. 产品开发用的是 vue, 经同事介绍使用了vue-video-player视频播放插件,通过 demo案例很快实现了视频播放效果 <video-player class="vjs-custom-skin" ref="videoPlayer1" :options="playerOptions" :playsinline="true" :even

  • Vue.js点击切换按钮改变内容的实例讲解

    代码实例: 代码描述:点击切换按钮,来改变显示的内容,切换不同的单位.flag相当于一个开关,控制开关的改变,来切换不同的单位.同样适用于其他的切换内容实例,也可设置按钮点击显示隐藏等. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue点击切换改变内容</title> <script src="https://cdn.bo

  • vue实现按钮切换图片

    本文实例为大家分享了vue实现按钮切换图片的具体代码,供大家参考,具体内容如下 Tab选项卡 实现步骤 1.实现静态UI效果 用传统的方式实现标签结构和样式 2.基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 设置基本样式 { overflow: hidden; padding: 0; margin: 0; } .tab ul li { box-sizing: border-box; padding: 0; float: left; width

  • vue实现点击按钮切换背景颜色的示例代码

    用vue简单的实现点击按钮切换背景颜色,具体代码如下所示: <div class="btnTitle"> <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div> <div class="btn-bg" :class="{bg:time == 4}" @c

  • vue点击按钮实现简单页面的切换

    本文实例为大家分享了vue点击按钮实现页面切换的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8">

  • vue中点击切换按钮功能之点启用后按钮变为禁用

    实现方法分位三步: 在template中设置2个按钮,通过v-if ,v-show来控制: data中设置按钮的默认值: methods中控制点击按钮切换效果. <template> <el-table :data="tableData" border style="width: 100%"> <el-table-column fixed prop="date" label="日期" width=

  • Vue中点击active并第一个默认选中功能的实现

    在jQuery中: 就是让第一个选中,其他的不选中! 当点击后当前选中,其他不选中. 有一种绕口令:东边的喇嘛买了西边的喇叭 o((⊙﹏⊙))o 在Vue中快速创建与选中 1.遍历出来, 在click中赋值 遍历出来的mx. 2.class进行决定是否显示,一点击就把对应的mx赋到activeName中 3.此时activeName就和mx一模一样的文本,然后返回一个true能显示当前的了 4.把最后一个瑕疵补上, 让第一个默认选中.就是把activeName放一个数值就行了 <template

  • 基于Vue中点击组件外关闭组件的实现方法

    Vue定义全局点击函数,参数为点击的回调函数. Vue.prototype.globalClick = function (callback) { //页面全局点击 $(document).click(callback); } 组件挂载后监听全局的点击事件 mounted:function () { this.globalClick(this.handleClickOut); }, 隐藏元素. 取到dom节点,判断父级是否存在来判断是否需要来关闭 handleClickOut:function

  • Vue中点击url下载文件的案例详解

    目录 代码实现 使用 注意 封装自定义指令 将url转成bold,在创建a标签下载blob 代码实现 在src 下面的 directive 文件夹下新建目录 downLoadUrl downLoadUrl / index.js文件 /* * 后端返回文件的url,前端创建a标签来下载 * * 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题, * 2. 下载文件时,浏览器会有闪动的问题 * * 页面内使用 * 1. 引入指令 import downLoad from

  • Vue点击切换颜色的方法

    如下所示: <template> <div> <div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div> </div> </template> <script>

  • js实现点击切换卡片功能

    本文实例为大家分享了js实现点击切换卡片功能的具体代码,供大家参考,具体内容如下 在实际应用中,点击或者移入某一元素上,弹出下拉菜单或者页面,是网页设计的常见操作. 下面我们实现一种点击菜单实现菜单切换,使用js提供三种方式实现该功能. 1.使用html设计基本结构 <body> <h2>多Tab点击切换</h2> <ul id="tab"> <li id="tab1" value="1"&g

  • Vue点击切换Class变化,实现Active当前样式操作

    刚入门Vue没多久,在制作过程中遇到很多简单实用的小技巧. 没有太多的墨水,直接上代码: 一.先在data里增加一个变量,用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个,-1为不选择 }; }, 二.在Template里面的代码,切记在@click方法里面要传index, <li :class="activeClass == index ? 'active':''" v-for="(item,ind

  • 详解vue中点击空白处隐藏div的实现(用指令实现)

    简单想应该怎么实现? 1.肯定是给document增加一个click事件监听 2.当发生click事件的时候判断是否点击的当前对象 结合着本思路和指令咱们来实现. 简单介绍vue指令 一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中). update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNod

  • JavaScript实现点击切换功能

    本文实例为大家分享了JavaScript实现点击切换功能的具体代码,供大家参考,具体内容如下 在实际应用中,点击或者移入某一元素上,弹出下拉菜单或者页面,是网页设计的常见操作. 下面我们实现一种点击菜单实现菜单切换,使用js提供三种方式实现该功能. 1.使用html设计基本结构 <body> <h2>多Tab点击切换</h2> <ul id="tab"> <li id="tab1" value="1&q

随机推荐