本代码用作己用,方便自己做代码,你们要是有类似的功能可以借鉴,也可以提醒我更好的方法,谢谢
一、点击按钮弹框,然后传进去两个值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>
Logo

前往低代码交流专区

更多推荐