Vue实战篇：多项选择器的实际运用

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用

文章目录

• 系列文章目录
• 一、背景
• 二、Element UI 多项选择器
• 三、多项选择器的实际案例

---

一、背景

• 多项选择器在前端页面开发中有广泛的应用，比如在角色权限分配功能中对用户分配多个角色权限，则需要在选择器中进行多项选择。
  

• 本文将通过一个案例介绍多项选择器的实际运用。

二、Element UI 多项选择器

• 我们首先看一下Element UI 组件官方的文档介绍
  

<template>
  <el-select v-model="value1" multiple placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '超级管理员'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: []
      }
    }
  }
</script>

三、多项选择器的实际案例

3.1 功能需求

• 供应商在注册成功后，系统后台需要对供应商配置合同模板，在配置模板时，管理员需要对模板名称进行多项选择，一次增加。

3.2 源码

<template>
  <div class="app-container">
    <div class="head-container">
      <Search />
      <crudOperation>
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%;">
      <el-table-column prop="enabled" label="是否认证">
        <template slot-scope="scope">
          <span v-if=" scope.row.enabled===false " style="color:red">{{ '认证不通过' }}</span>
          <span v-else-if=" scope.row.enabled===true " style="color:blue">{{ '认证已通过' }}</span>
          <span v-else>{{ '未认证' }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="supplierFullName" label="供应商全称" />
      <el-table-column prop="telNo" label="电话" />
      <el-table-column prop="contact" label="联系人" />
      <el-table-column prop="socialCreditCode" label="社会信用代码" />
      <el-table-column prop="createTime" label="创建日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="框架合同配置" width="100px">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="info(scope.row.username,scope.row.id,scope.row.supplierFullName)">配置详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog class="dialog" :visible.sync="dialog" title="配置详情" append-to-body top="30px" :width="dialogWidth" @close="destroy">

      <el-form
        ref="form"
        :model="form"
      >
        <el-row>
          <el-col :span="24">

            <el-select
              v-model="form.roleId"
              style="width:300px"
              multiple
              clearable
              placeholder="请选择合同模板"
            >
              <el-option
                v-for="item in roles"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
              </el-option>
            </el-select>
            <el-button type="primary" @click.prevent="add">
              增加
            </el-button>
            <el-button type="danger" size="mini" @click.prevent="del">
              删除
            </el-button>
            <el-button type="success" size="mini" @click.prevent="approve">
              确认
            </el-button>
          </el-col>
        </el-row>
        <!-- 供应商合同模板上传信息组件 -->
        <el-form-item>
          <SupplierContract ref="child" :supplier-name="username" :supplier-full-name="form.supplierFullName" :editable="false" />
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import Search from './search'
import CRUD, { presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import crudOperation from '@crud/CRUD.operation'
import SupplierContract from '@/views/purchase/components/supplierContract'
import { getContractTemplate, addSupplierContractTemplate, deleteSupplierContractTemplate, approveSupplierContractTemplate } from '@/api/srm/supplier'
import { Notification } from 'element-ui'

export default {
  name: 'SupplierContractTemplate',
  components: { Search, crudOperation, pagination, SupplierContract },
  cruds() {
    return CRUD({ title: '供应商信息', url: '/api/srm/supplier/page' })
  },
  mixins: [presenter()],
  data() {
    return {
      errorInfo: '',
      dialog: false,
      username: '',
      form: {},
      roles: [],
      dialogWidth: '90%'
    }
  },
  created() {
    this.crud.optShow = {
      add: false,
      edit: false,
      del: false,
      download: false
    }
    // 获取供应商可用角色
    getContractTemplate().then(data => {
    //   console.log(data)
      this.roles = data
    })
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.setDialogWidth()
      })()
    }
  },
  methods: {
    setDialogWidth() {
    //   console.log(document.body.clientWidth)
      var val = document.body.clientWidth
      const def = 1280 // 默认宽度
      if (val < def) {
        this.dialogWidth = '90%'
      } else {
        this.dialogWidth = def + 'px'
      }
    },
    // 获取异常详情
    info(username, id, supplierFullName) {
      this.dialog = true
      this.username = username
      this.form.supplierId = id
      this.form.userName = username
      this.form.supplierFullName = supplierFullName
    },
    destroy() {
      this.dialog = false
      this.username = ''
      this.form = {}
    },
    // 认证
    add() {
      if (this.form.userName === '' || this.form.userName === undefined) {
        Notification.error({
          title: '供应商对应的用户不能为空'
        })
        return
      }
      if (this.form.roleId === '' || this.form.roleId.length === 0 || this.form.roleId === undefined) {
        Notification.error({
          title: '必须先选择框架合同模板'
        })
        return
      }

      // console.log(this.form.roleId)
      let execute = true
      const childData = this.$refs.child.fileList
      childData.forEach(element => {
        const index = this.form.roleId.indexOf(element.contractTemplate.name)
        // console.log(index)
        if (index >= 0) {
          Notification.error({
            title: element.contractTemplate.name + '已存在，不得重复添加'
          })
          execute = false
          return
        }
      })
      if (execute) {
        const supplierContractTemplate = { supplierId: this.form.supplierId, contractTemplate: this.form.roleId }
        addSupplierContractTemplate(supplierContractTemplate).then(data => {
          this.$refs.child.init(this.form.userName)
          this.form.roleId = []
        })
      }
    },
    del() {
      const selection = this.$refs.child.selection
      if (this.form.userName === '' || this.form.userName === undefined) {
        Notification.error({
          title: '供应商对应的用户不能为空'
        })
        return
      }
      if (selection === null || selection.length === 0) {
        Notification.error({
          title: '请先在表格中勾选需要删除的合同模板'
        })
        return
      }

      const selectionTemplates = []
      const ids = []
      selection.forEach(element => {
        // console.log(element.id)
        selectionTemplates.push(element.contractTemplate.name)
        ids.push(element.id)
      })

      const supplierContractTemplate = { supplierId: this.form.supplierId, contractTemplate: selectionTemplates, ids: ids }
      deleteSupplierContractTemplate(supplierContractTemplate).then(data => {
        this.$refs.child.init(this.form.userName)
      })
    },
    approve() {
      const selection = this.$refs.child.selection
      if (this.form.userName === '' || this.form.userName === undefined) {
        Notification.error({
          title: '供应商对应的用户不能为空'
        })
        return
      }
      if (selection === null || selection.length === 0) {
        Notification.error({
          title: '请先在表格中勾选需要锁定的合同模板'
        })
        return
      }

      const selectionTemplates = []
      const ids = []
      selection.forEach(element => {
        // console.log(element.id)
        selectionTemplates.push(element.contractTemplate.name)
        ids.push(element.id)
      })

      const supplierContractTemplate = { supplierId: this.form.supplierId, contractTemplate: selectionTemplates, ids: ids }
      approveSupplierContractTemplate(supplierContractTemplate).then(data => {
        this.$refs.child.init(this.form.userName)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.dialog{
    min-width: 980px;
    .el-dialog__body {
    overflow:auto
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 70px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.demo-table-expand .el-form-item__content {
  font-size: 12px;
}
.el-dialog__body {
  padding: 0 20px 10px 20px !important;
}
.java.hljs {
  color: #444;
  background: #ffffff !important;
  height: 630px !important;
}

</style>

3.3 实际效果

本文地址：https://blog.csdn.net/jpgzhu/article/details/109625755