首先 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)容部分,這里變量命名比較亂,但是效果都是通過變量控制的,主要思路是點(diǎn)擊后,將一個(gè)id傳入一個(gè)臨時(shí)數(shù)組,再遍歷這個(gè)臨時(shí)數(shù)組,拿數(shù)組中的值與當(dāng)前值對比,如果對比成功,那么就讓選中的checkbox顯示出來

相對的,如果想要提交,那么只需要將臨時(shí)數(shù)組傳進(jìn)去就好了

<div 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='http://www.cgvv.com.cn/bcjs/@/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ǔ)充知識(shí)：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)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。