element-ui select 多选框 使用 默认数据回显

<template>
  <div>
    <el-dialog
      title="分享折扣模板"
      top="8vh"
      :visible="sharTemplateShow"
      :before-close="beforeClose"
      @close="handleCloseDialog"
      @open="openDialog"
    >
      <el-form ref="formSearch" :model="formSearch" label-width="100px" :rules="formSearchRules">
        <el-form-item label="分享用户：" prop="sharList">
          <el-select
            v-model="formSearch.sharList"
            multiple
            filterable
            allow-create
            style="width:90%"
            default-first-option
            placeholder="请选择分享用户"
            value-key
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <el-button
          style="margin-top: 12px"
          type="primary"
          @click="onSubmit"
        >确定</el-button>
        <el-button @click="handleCloseDialog">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// GET 获取分享的用户列表 // POST 分享用户按钮 // GET 查看分享情况
import { reqGetShareUser, reqShareDiscountTemplate, reqGetShareInfoList } from '@/api/discount'
export default {
  name: 'CloudControlTemplateShar',
  props: {
    sharTemplateShow: {
      type: Boolean,
      required: true
    },
    // userIdList: {
    //   type: Array,
    //   required: true
    // }
    sharId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      formSearch: {
        sharList: []
      },
      options: [],
      formSearchRules: {
        sharList: [{ required: true, message: '请选择分享用户', trigger: ['blur', 'change'] }]
      }
    }
  },

  mounted() {

  },

  methods: {
    // 开启
    openDialog() {
      this.getShareUser()
    },
    // 取消
    handleCloseDialog() {
      this.$emit('update:sharTemplateShow', false)
      this.formSearch.sharList = ''
      this.$refs.formSearch.resetFields()
    },
    // 关闭弹层前
    async beforeClose(done) {
      const confirmResult = await this.$confirm(
        '内容还未保存，此操作会导致信息丢失！是否继续？',
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmResult === 'cancel') return
      done()
    },
    // 获取分享拥护
    async getShareUser() {
      const { result: res } = await reqGetShareUser()
      this.options = res
      console.log(res)
    },
    // 确认
    async onSubmit() {
      // if (this.formSearch.sharList.length <= 0) return this.$message.warning('请选择分享用户')
      this.$refs.formSearch.validate(async(valid) => {
        if (!valid) return
        console.log(this.sharId, this.formSearch.sharList)
        const res = await reqShareDiscountTemplate({
          discountTemplateId: this.sharId,
          userIdList: this.formSearch.sharList
        })
        if (res.code === 200) {
          this.$message.success('分享成功')
          this.handleCloseDialog()
          this.$emit('getlistTemplate')
        }
        // console.log(res)
      })
    },
    // GET 查看分享情况 回显
    async getShareInfoList() {
      const res = await reqGetShareInfoList(this.sharId)
      // console.log(res)
      const Ids = res.map(item => item.shareUserId)
      this.formSearch.sharList = Ids // 多选框数据回显 Id与 options数组里的ID对应即可
    }
  }
}
</script>

<style lang="scss" scoped>

</style>