首先 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