Element el-tag 标签click单击事件绑定参数
微wx笑
2022-07-06【前端开发】
3
0关键字：
Element el-tag
参考官方文档，回调参数默认是没有的，那么当点击Tag标签的时候我们如何得到它的内容呢？
Element el-tag 标签click单击事件绑定参数
参考官方文档，回调参数默认是没有的，那么当点击Tag标签的时候我们如何得到它的内容呢？
这就需要我们在绑定事件的时候传递参数，具体写法如下：
<div class="tag-group">
<el-tag
v-for="item in subTypeItems"
:key="item.label"
:type="item.type"
@click="subTypeClick(item)"
effect="light"
>
{{ item.label }}
</el-tag>我这里传递的是item，那item具体是什么样子呢？
看subTypeItems的定义
new Vue({
el: '#app',
data: function() {
return {
subTypeItems:[{label: '餐饮'}, {label: '车票'}, {label: '油费'}],
loading: true,
form: {
pid:'',
atype:'支出',
adate:'<?=date("Y-m-d",time())?>',
sub_type:'',
amount:0.00,
voucher:[], //凭证单据
comment:''
},
rules: {
adate: [
{ required: true, message: '日期不能为空', trigger: 'blur' }
],
atype: [
{ required: true, message: '类别不能为空', trigger: 'blur' }
],
sub_type: [
{ required: true, message: '细分类别不能为空', trigger: 'blur' }
],
amount: [
{ required: true, message: '金额不能为空', trigger: 'blur' },
{ pattern: /^(([1-9]{1}d*)|(0{1}))(.d{1,2})?$/,
message: "请输入合法的金额数字，最多两位小数",
trigger: "change"}
]
}
}
},
mounted() {
$("#loading-mask").hide();
$("#app").show();
},
methods: {
subTypeClick(tag){
console.log(tag);
this.form.sub_type = tag.label;
}
}
} );在subTypeClick事件处理函数中，可以通过tag.label来访问标签的内容。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-07-06/1292.html
