首先 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; }
接着是内容部分,这里变量命名比较乱,但是效果都是通过变量控制的,主要思路是点击后,将一个id传入一个临时数组,再遍历这个临时数组,拿数组中的值与当前值对比,如果对比成功,那么就让选中的checkbox显示出来
相对的,如果想要提交,那么只需要将临时数组传进去就好了
<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>"@/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) } }, } // 如果存在数组中,那么进行删除操作, 如果不存在,则放入数组中
补充知识:vue列表获取勾选的内容并打印
先将勾选的内容通过弹出层显示出来
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>
然后进行打印
printData: function() { this.$print(this.$refs.print); },
说明:
vue框架使用是element
打印使用的插件地址:https://github.com/xyl66/vuePlugs_printjs
在main.js中进行注册
import Print from '@/plugs/print'
Vue.use(Print);
以上这篇关于vue的列表图片选中打钩操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]