vue开发笔记

 1.vue动态修改表单rules

1.1.利用watch监听器：
这个是在：伊顿管理后台-事件流--任务管理--处理任务-转办那里用到，选了转办，出现转办人下拉菜单，然后下拉菜单必填
表单：
<el-form ref="form" :model="form" :rules="myrules" label-width="100px">
data里定义对象：myrules: {},
监听器：

  watch: {
    "form.taskEnum": function(val) {
      if (val === "Turn") {
        this.showToUserId = true;
        this.myrules = this.rules;
      } else {
        this.showToUserId = false;
        this.myrules = this.no_rules;
      }
    }
  },

利用计算属性：

这个是在：伊顿管理后台-事件流--流程定义-发起流程页面用到的，如果是换型工单，那么工单下拉菜单必填
表单：
<el-form ref="form" :model="form" label-width="80px" :rules="currentRules">
计算属性：

  computed: {
      currentRules: function() {
        if(this.showWorkOrderChange) {
            return this.rules;
        } else {
            return this.secondRules;
        }
      }
  },

貌似使用计算属性比较简单

2.表格中使用el-switch
一定要设置0和1，不能使用true和false。如果对应的值是true和false要想办法转成0和1

              <el-table-column
                min-width="200px"
                label="是否使用"
                align="center"
              >
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.used"
                    active-color="#13ce66"
                    inactive-color="#cccccc"
                    :active-value="1"
                    :inactive-value="0"
                    @change="changeUsed(scope.row, scope.$index)"
                  ></el-switch>
                </template>
              </el-table-column>

务必通过以下方法，将数据更新到原list，这样list才会发生变化

    changeUsed(row, index) {
      this.list[index].used = row.used;
      // 处理自己的业务逻辑，saveData方法中用到了this.list
      this.saveData();
    },

3.表格排序：

原理就是根据表格绑定的数组排序。
list是个对象数组，以下写法是按升序排

    sort() {
      this.list = this.list.sort((a, b) => a.sort - b.sort);
      console.log(this.list);
    }

4.el-radio-group使用，这个功能是在做事件流--模型--绑定用户（默认用户/可选用户）时用到的

VUE：

        <el-radio-group v-model="displayName" @change="changeUserType">
          <el-radio-button label="默认用户"></el-radio-button>
          <el-radio-button label="可选用户"></el-radio-button>
        </el-radio-group>

JS：

    changeUserType(val) {
      this.displayName = val;
      this.getList();
    },

COMPUTED计算属性：

    userType: function() {
      let userType = 0;
      switch(this.displayName) {
        case "默认用户":
          userType = 0
          break;
        case "可选用户":
          userType = 1
          break;
      }
      return userType;
    },