vue+element小知识点（表格默认勾选/禁用&生成二维码）

1.element设置表格默认勾选

    toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },

注意： element官网有设置表格默认选中状态的效果，但是很多时候都是后端获取数据后再进行展示，这个时候就有了一个异步的效果，如果又是放在弹出窗内，那又有了dom渲染的一个事情

(1) 第一步获取数据（选中的数据以及表格展示的数据）这里的两个数据必须是同一个对象的数据，也就是数据必须是表格当中的数据，而且 不能深拷贝

(2) 设置表格数据

(3) 设置完成后，在dom挂载之后执行官网中写的 this.$refs.multipleTable.toggleRowSelection(row); 这里需要用vue官网的 Vue.nextTick( [callback, context] )

以上三步才能设置，设置选中数据必须在dom视图更新后执行

    that.$http.get(requestUrl).then(res => {
        // console.log('角色列表',res)
        that.tableAuthorData = res.data.data.rows;
        that.roleTotal = res.data.data.total;
      }).then(res => {
        // console.log('默认角色',that.powerRoleName)
        //获取该用户已有的角色,设置已选中
        //请求完列表后，回调，过滤需要被勾选的
        let powerRoleArr = that.powerRoleName.split(',');
        for(let j in powerRoleArr){
          for(let i in that.tableAuthorData){
            if(powerRoleArr[j] == that.tableAuthorData[i].name){
              //设置默认选中的改用户已拥有的角色
              that.$refs.AuthorTable.toggleRowSelection(that.tableAuthorData[i],true);
            }
          }
        }
      })

2.element设置表格默认禁用

    <el-table-column type="selection" :selectable="disabledItem"></el-table-column>

    //默认禁用
    disabledItem(row) {
        return row.type == 1 ? true : false;
    },

3.vue中拿到地址生成二维码的方式

原文地址：blog.csdn.net/qq_39603448…

第二种方法：blog.csdn.net/weixin_4289…

1：安装

npm i vue-qr

2：在需要的组件中引入

import VueQr from 'vue-qr'

3：模板中

<vue-qr class="bicode" :logoSrc="imagePath" :text="codeValue"></vue-qr>

4.data中：

      codeValue: "", //显示的值、跳转的地址
      icode: "",     //可携带参数
      imagePath: "" //中间logo的地址

5.注册组件

//定义变量
  components: {
    VueQr
  },

6.mounted中获取二维码的地址 如: 简单的方法：

this.codeValue = “http://www.baidu.com”

拼接的方法：

this.codeValue = “http://www.t1.qidianjinfu.com/#/register1?yqm=” + this.icode