關(guān)于vue的列表圖片選中打鉤操作
更新時間：2020年09月09日 09:14:50 作者：super·田
這篇文章主要介紹了關(guān)于vue的列表圖片選中打鉤操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
首先 css,美化checkbox樣式,這一段代碼拿過去可以直接用
label {
font-size: 25px;
cursor: pointer;
position: absolute;
top: -10px;
right: 0px;
z-index: 150;
}
label i {
font-size: 15px;
font-style: normal;
display: inline-block;
width: 18px;
border-radius: 15px;
height: 18px;
text-align: center;
line-height: 18px;
color: #fff;
vertical-align: middle;
margin: -2px 2px 1px 0px;
border: #53c7f0 1px solid;
}
input[type="checkbox"],
input[type="radio"] {
display: none;
outline: none;
}
input[type="radio"]+i {
border-radius: 7px;
}
input[type="checkbox"]:checked+i,
input[type="radio"]:checked+i {
background: #fff;
color: #53c7f0;
}
接著是內(nèi)容部分,這里變量命名比較亂,但是效果都是通過變量控制的,主要思路是點擊后,將一個id傳入一個臨時數(shù)組,再遍歷這個臨時數(shù)組,拿數(shù)組中的值與當(dāng)前值對比,如果對比成功,那么就讓選中的checkbox顯示出來
相對的,如果想要提交,那么只需要將臨時數(shù)組傳進(jìn)去就好了
<div class="t-recommed-r" v-for="(item,index) in list" :key="index">
<p><span></span> {{ item.name }} <span></span></p>
<ul>
<li v-for="(val,key) in item.data" :key="key" @click="checkTab(val.id)">
<label v-for="(v, k) in checkedList" :key="k" v-show="val.id === v">
<input type="checkbox" :checked="val.id === v">
<i>✓</i>
</label>
<a><img src="@/assets/images/null.png"><em>{{ val.name }}</em></a>
</li>
</ul>
</div>
最后一步,js部分
data () {
return {
checkedList: [],
list: []
}
},
methods: {
checkTab (id) {
let index = this.checkedList.indexOf(id)
if (index === -1) {
this.checkedList.push(id)
} else {
this.checkedList.splice(index, 1)
}
},
}
// 如果存在數(shù)組中,那么進(jìn)行刪除操作, 如果不存在,則放入數(shù)組中
補(bǔ)充知識：vue列表獲取勾選的內(nèi)容并打印
先將勾選的內(nèi)容通過彈出層顯示出來
showPrintData: function() {
var id = this.checkedList[0].id;
axios.post(this.$api.contentGet, { id: id }).then(res => {
this.contentTxt = res.body.txt;
this.dialogFormVisible=true;
});
},
contentTxt: "",
dialogFormVisible: false,
<el-dialog :visible.sync="dialogFormVisible">
<div ref="print" v-html="contentTxt">
{{contentTxt}}
</div>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="printData()">打印</el-button>
</div>
</el-dialog>
然后進(jìn)行打印
printData: function() {
this.$print(this.$refs.print);
},
說明：
vue框架使用是element
打印使用的插件地址：https://github.com/xyl66/vuePlugs_printjs
在main.js中進(jìn)行注冊
import Print from '@/plugs/print'
Vue.use(Print);
以上這篇關(guān)于vue的列表圖片選中打鉤操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue3打包部署報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue 實現(xiàn)無規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
Vue是當(dāng)前很火的一款MVVM的輕量級框架，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的。因為它提供了簡潔易于理解的api，使得我們很容易上手。這篇文章給大家介紹了vue雙向數(shù)據(jù)綁定問題，感興趣的朋友一起看看吧2017-10-10
這篇文章主要介紹了富文本編輯器vue2-editor實現(xiàn)全屏功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
vue組件中使用props傳遞數(shù)據(jù)的實例詳解
這篇文章主要介紹了vue組件中使用props傳遞數(shù)據(jù)的實例詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細(xì)介紹了vue監(jiān)聽用戶輸入和點擊功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue3彈出層V3Popup實例詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
前端開發(fā)指南之vue-grid-layout的使用實例
vue-grid-layout是一個vue柵格拖動布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于Vue中router-view無法顯示的解決辦法,router-view組件作為vue最核心的路由管理組件,在項目中作為路由管理經(jīng)常被使用到,需要的朋友可以參考下2023-07-07