[TOC]

使⽤ Element 的 Dialog 对话框组件

// Element 官⽅示例 title=“提示” :visible.sync=“dialogVisible” width=“30%” :before-close=“handleClose”> 这是⼀段信息 slot=“footer” class=“dialog-footer”> @click=“dialogVisible = false”>取 消 type=“primary” @click=“dialogVisible = false”>确 定

放⼊⻚⾯最后位置，修改 title，width，去除关闭处理函数，声明 dialogVisible

// user/components/list.vue

点击分配⻆⾊按钮时显示对话框

type=“text” @click=“handleSelectRole(scope.row)” >分配⻆⾊ …

设置多选下拉菜单，通过 Element 的 Select 选择器的 -> 基础多选功能设置

// Element 官⽅示例 v-model=“value1” multiple placeholder=“请选择”> v-for=“item in options” :key=“item.value” :label=“item.label” :value=“item.value”>

添加到对话框中

// list.vue … > v-model=“value1” multiple placeholder=“请选择”> v-for=“item in options” :key=“item.value” :label=“item.label” :value=“item.value”> slot=“footer” class=“dialog-footer”> … data () { return { … // 列表数据 options: [{ value: ‘选项1’, label: ‘⻩⾦糕’ }, { value: ‘选项2’, label: ‘双⽪奶’ }, { value: ‘选项3’, label: ‘蚵仔煎’ }, { value: ‘选项4’, label: ‘⻰须⾯’ }, { value: ‘选项5’, label: ‘北京烤鸭’ }], // 选中的数据 value1: [] }