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)方法分位三步:
- 在template中設(shè)置2個(gè)按鈕,通過v-if ,v-show來控制;
- data中設(shè)置按鈕的默認(rèn)值;
- 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),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2023-09-09
-
vue3如何解決各場景l(fā)oading過度(避免白屏尷尬!)
在開發(fā)的過程中點(diǎn)擊提交按鈕,或者是一些其它場景總會(huì)遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場景l(fā)oading過度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下 2023-03-03
-
vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教 2022-05-05
-
VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教 2024-01-01
最新評(píng)論
實(shí)現(xiàn)方法分位三步:
- 在template中設(shè)置2個(gè)按鈕,通過v-if ,v-show來控制;
- data中設(shè)置按鈕的默認(rèn)值;
- 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),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09vue3如何解決各場景l(fā)oading過度(避免白屏尷尬!)
在開發(fā)的過程中點(diǎn)擊提交按鈕,或者是一些其它場景總會(huì)遇到loading加載,下面這篇文章主要給大家介紹了關(guān)于vue3如何解決各場景l(fā)oading過度的相關(guān)資料,避免白屏尷尬,需要的朋友可以參考下2023-03-03vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)懶加載的樹狀表格實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式
這篇文章主要介紹了VUE使用router.push實(shí)現(xiàn)頁面跳轉(zhuǎn)和傳參方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01