欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中點(diǎn)擊切換按鈕功能之點(diǎn)啟用后按鈕變?yōu)榻?/h1>
 更新時(shí)間:2021年09月14日 11:08:44   作者:大師的修煉之路  
這篇文章主要介紹了vue中點(diǎn)擊切換按鈕功能之點(diǎn)啟用后按鈕變?yōu)榻霉δ?,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

實(shí)現(xiàn)方法分位三步:

  1. 在template中設(shè)置2個(gè)按鈕,通過v-if ,v-show來控制;
  2. data中設(shè)置按鈕的默認(rèn)值;
  3. methods中控制點(diǎn)擊按鈕切換效果。
<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="狀態(tài)"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
      <template slot-scope="scope">
            <el-input placeholder="請(qǐng)輸入內(nèi)容" 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="市區(qū)"
      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: '普陀區(qū)',
          address: '上海市普陀區(qū)金沙江路 1518 弄上海市普陀區(qū)金沙江路 1518 弄',
          zip: 200333,
          show:true
        }, {
          date: '2016-05-04',

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

另外,注意下,data中,按鈕的默認(rèn)值要放在data下,圖1。

不能放在table中,否則會(huì)按鈕顯示不出來,且會(huì)報(bào)錯(cuò),圖2:Property or method "btnStatus" is not defined on the instance but referenced during render.

這個(gè)報(bào)錯(cuò)原因是:在template里面或者在方法里面使用了 “btnStatus” ,但是在data里面沒有定義。

到此這篇關(guān)于vue中點(diǎn)擊切換按鈕功能之點(diǎn)啟用后按鈕變?yōu)榻玫奈恼戮徒榻B到這了,更多相關(guān)vue點(diǎn)擊切換按鈕內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種實(shí)現(xiàn)方法

    vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種實(shí)現(xiàn)方法

    這篇文章主要介紹了vue、uniapp中動(dòng)態(tài)添加綁定style、class?9種方法實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09
  • 在vue中實(shí)現(xiàn)跨域方法小結(jié)

    在vue中實(shí)現(xiàn)跨域方法小結(jié)

    在Web開發(fā)中,跨域問題是一大挑戰(zhàn),跨域是指網(wǎng)絡(luò)請(qǐng)求從一個(gè)域名發(fā)起,而請(qǐng)求的目標(biāo)資源位于另一個(gè)不同的域名下,通常使用Vue CLI的代理來解決跨域問題,而在生產(chǎn)環(huán)境中,可以通過后端配置CORS或使用Nginx反向代理,或者通過服務(wù)器中轉(zhuǎn)來解決跨域問題
    2023-10-10
  • vue3如何解決各場景l(fā)oading過度(避免白屏尷尬!)

    vue3如何解決各場景l(fā)oading過度(避免白屏尷尬!)

    在開發(fā)的過程中點(diǎn)擊提交按鈕,或者是一些其它場景總會(huì)遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場景l(fā)oading過度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下
    2023-03-03
  • vue eslint簡要配置教程詳解

    vue eslint簡要配置教程詳解

    這篇文章主要介紹了vue eslint簡要配置,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-07-07
  • VUE3子表格嵌套分頁查詢互相干擾的問題解決方案

    VUE3子表格嵌套分頁查詢互相干擾的問題解決方案

    這篇文章主要介紹了VUE3子表格嵌套分頁查詢互相干擾的問題解決方案,如果不需要做子表格的分頁查詢,那么可以直接在主表格中嵌套子表格,本文給大家介紹兩種方式,需要的朋友可以參考下
    2024-01-01
  • vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例

    vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例

    這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue?package-lock.json的作用及說明

    Vue?package-lock.json的作用及說明

    這篇文章主要介紹了Vue?package-lock.json的作用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • Vue.js $refs用法案例詳解

    Vue.js $refs用法案例詳解

    這篇文章主要介紹了Vue.js $refs用法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式

    VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式

    這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01
  • vue封裝公共方法的實(shí)現(xiàn)代碼

    vue封裝公共方法的實(shí)現(xiàn)代碼

    這篇文章給大家介紹了vue封裝公共方法的實(shí)現(xiàn),文章中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-01-01

最新評(píng)論