持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

theme: channing-cyan

最近收到了项目经理的大无语需求

1.需求1

是部门主管显示负责的部门，非主管显示所属部门

这个很好实现，v-show就能解决，首先在表单里加入v-show="isManager"，在data里让isManager为false，然后在表单里加入三元判断:label='isManager?"负责部门":"所属部门"'，具体代码如下：

 <!-- 实现根据是否为部门主管判断下面下拉框单/多选 -->
        <template prop="departmentName">
          <!-- 选中是部门主管 -->
          <el-form-item class="el-form-item is-success is-required" v-show="isManager" :label='isManager?"负责部门":"所属部门"'>
            <el-cascader :show-all-levels="false" v-model="edit.model.departmentIds" style="width: 300px"
              :options="options" :props="{checkStrictly: true, multiple: true , emitPath: false }" clearable>
            </el-cascader>
          </el-form-item>
          <!-- 取消 不是部门主管 -->
          <el-form-item class="el-form-item is-success is-required" v-show="!isManager"
            :label='isManager?"负责部门":"所属部门"'>
            <el-cascader v-model="edit.model.departmentIds" style="width: 300px" :options="options"
              :props="{ checkStrictly: true }" clearable>
            </el-cascader>
          </el-form-item>
        </template>

效果如下

2.需求2

在点击主管部门的时候为多选状态，比如点击父部门【技术部】，但是就不能点击子部门【技术部一部】；点击子部门【技术部一部】时，不能点击父部门【技术部】

这个不符合element的逻辑，暂时我想不出来解决办法只能通过后端写一个接口，判断如果既选择了父部门又选择了子部门，则弹出提示，然后让当前数组清空，并让用户重新选择。解决代码如下：

 handleChange(evalue) {
      //  把我们修改的值转为字符串并去除中括号
      if (evalue) {
        let str = JSON.stringify(evalue).replace(/\[|]/g, "");
        //检查所选部门是否在同一层级
        SmsUserService.checkLevel(str).then((res) => {
          if (res.data !== true) {
            this.$confirm(
              "注意：父部门和子部门不能同时选择，请重新选择?",
              "提示",
              {
                confirmButtonText: "确定",
                type: "warning",
              }
            )
              .then(() => {
                this.$message({
                  type: "warning",
                  message: "请重新选择!",
                });
                this.edit.model.departmentIds = [];
                this.$forceUpdate();
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "请重新选择!",
                });
                this.edit.model.departmentIds = [];
                this.$forceUpdate();
              });
          }
        });
        //检查该部门是否已经有主管
        SmsUserService.existMaster(evalue[0]).then((res) => {
          if (res.data !== true) {
            this.$confirm("注意：此部门已有主管，请重新选择?", "提示", {
              confirmButtonText: "确定",
              type: "warning",
            })
              .then(() => {
                this.$message({
                  type: "warning",
                  message: "请重新选择!",
                });
                this.edit.model.departmentIds = [];
                this.$forceUpdate();
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "请重新选择!",
                });
                this.edit.model.departmentIds = [];
                this.$forceUpdate();
              });
          }
        });
      }
    },

3.需求3

一般情况下，点级子部门，会渲染出来父部门/子部门,但是需求是，选择子部门，只渲染子部门，那么如何操作呢

<el-form-item class="el-form-item is-success is-required" v-show="isManager" :label='isManager?"负责部门":"所属部门"'>
            <el-cascader
             v-model="edit.model.departmentIds" style="width: 300px" :options="options" :props="{checkStrictly: true, multiple: true }"
              clearable>     
            </el-cascader>
          </el-form-item>

渲染出来是这样的

3.1解决方法如下

在el-cascader 里加入:show-all-levels="false"，:props="{emitPath: false }"

全部代码如下：

<el-form-item class="el-form-item is-success is-required" v-show="isManager" :label='isManager?"负责部门":"所属部门"'>
    <el-cascader :show-all-levels="false" v-model="edit.model.departmentIds" style="width: 300px" :options="options" 
    :props="{checkStrictly: true, multiple: true , emitPath: false }" clearable>
    </el-cascader>
</el-form-item>

效果如下：

4.需求4

4.1 将渲染出的列表进行上下排列，初始样式如下图所示

那么如何将列表中的逗号去掉，并进行上下排列呢？

<el-table-column prop="departmentName" label="所属部门" min-width="130">
      </el-table-column>

4.2将上面的代码加入插槽，如下所示

     <el-table-column prop="departmentName" label="所属部门" min-width="130">
        <template slot-scope="scope">
          <span v-for="(item,index) in scope.row.departmentName" :key="index">
          {{item}}
         <br/></span>
        </template>
      </el-table-column>

渲染出来是这样的：

4.3 在获取列表数据的接口里进行遍历

   getListData() {
      this.loading.list = true;
      SmsUserService.list(this.query).then((res) => {
        //账户管理主页列表数据
        console.log("@@res主页", res);
        this.data = res.data;
        //这里是将departmentName进行遍历
         res.data.forEach(item=>{
           if(item.departmentName!==''||!item.departmentName){
             item.departmentName=item.departmentName.split(',')
           }
        })
        this.page = res.page;
        this.loading.list = false;
      });
    },

4.4效果如图所示

至此大功告成！由于是新手，最近遇到了很多棘手的问题，我将持续在掘金上更新！

vue+element 表单相关项目问题（一）——级联选择器