服务器之家

服务器之家 > 正文

关于vue的列表图片选中打钩操作

时间:2021-09-22 17:15     来源/作者:super·田

首先 css,美化checkbox样式,这一段代码拿过去可以直接用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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显示出来

相对的,如果想要提交,那么只需要将临时数组传进去就好了

?
1
2
3
4
5
6
7
8
9
10
11
12
<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部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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列表获取勾选的内容并打印

先将勾选的内容通过弹出层显示出来

?
1
2
3
4
5
6
7
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,

?
1
2
3
4
5
6
7
8
<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>

然后进行打印

?
1
2
3
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的列表图片选中打钩操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_42785284/article/details/84323685

标签:

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
返回顶部