vue项目上关于弹框传值的问题
本代码用作己用,方便自己做代码,你们要是有类似的功能可以借鉴,也可以提醒我更好的方法,谢谢一、点击按钮弹框,然后传进去两个值id menus在button里面加一个点击事件@click="getData(scope.row.id,scope.row.menus)"这是html代码<template slot-scope="scope"><el-button class="topB
·
本代码用作己用,方便自己做代码,你们要是有类似的功能可以借鉴,也可以提醒我更好的方法,谢谢
一、点击按钮弹框,然后传进去两个值id menus
在button里面加一个点击事件@click="getData(scope.row.id,scope.row.menus)"
这是html代码
<template slot-scope="scope">
<el-button class="topBtn" @click="getData(scope.row.id,scope.row.menus)">权限</el-button>
</template>
然后把需要的参数,比如id、menus的值传进去,这是js代码
<script>
export default {
data(){
return{
lists: [
{
id: 1,
name: '首页',
check: false,
key: 'home'
},
{
id: 2,
name: '业务管理',
check: false,
key: 'ERP'
},
{
id: 3,
name: '仓库管理',
check: false,
key: 'WMS'
},
{
id: 4,
name: '物流轨迹',
check: false,
key: 'process'
},
{
id: 5,
name: '财务结算',
check: false,
key: 'financial'
},
{
id: 6,
name: '智慧报表',
check: false,
key: 'repair'
},
{
id: 7,
name: '售后维修',
check: false,
key: 'report'
}
],}
},
methods:{
getData(i,txt) {//点击权限弹框把id menus值传进去
this.checked=false
this.id=i
this.menus=txt
this.show=true
var arr=txt.split(",")//split方法用于把字符串分割成字符串数组
for(var i=0; i<arr.length; i++) {//遍历txt数组
for(var j=0; j<this.lists.length; j++) {
if(this.lists[j].key==arr[i]) {
this.lists[j].check=true//如果传进来的值和弹出框里面的值一样,就默认勾选
}
}
}
for(var a=0; a<this.lists.length; a++) {
if(this.lists[a].check==true) {//如果勾选了,就会默认勾选 反之就不勾选
this.checked=true
}else {
console.log(2222)
this.checked=false
}
}
}
}
</script>
然后点击确定,把值传给后台,下面是js代码:
<template>
<button @click="sendData" class="btn">确定</button>
</template>
<script>
export default {
data() {
return {
tags: [],
methods: {
sendData() {
//点击确认把值传给后台
this.tags = [];
for (var i = 0; i < this.lists.length; i++) {
console.log(this.lists[i].check);
if (this.lists[i].check) {
this.tags.push(this.lists[i].key);
}
}
var txt = this.tags.join(",").length > 0 ? this.tags.join(",") : null; //join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
console.log(333, txt);
setPermiss(this.id, txt).then((res) => {
console.log(res);
});
this.show = false;
this.getUserList(); //再调用一遍数据接口,使数据及时更新
},
},
};
},
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)