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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143