60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<template>
|
|
<div class="components-container">
|
|
<el-button type="primary" @click="dialogTableVisible = true">open a Drag Dialog</el-button>
|
|
<el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address" @dragDialog="handleDrag">
|
|
<el-select ref="select" v-model="value" placeholder="请选择">
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
|
</el-select>
|
|
<el-table :data="gridData">
|
|
<el-table-column property="date" label="Date" width="150" />
|
|
<el-table-column property="name" label="Name" width="200" />
|
|
<el-table-column property="address" label="Address" />
|
|
</el-table>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
|
|
|
|
export default {
|
|
name: 'DragDialogDemo',
|
|
directives: { elDragDialog },
|
|
data() {
|
|
return {
|
|
dialogTableVisible: false,
|
|
options: [
|
|
{ value: '选项1', label: '黄金糕' },
|
|
{ value: '选项2', label: '双皮奶' },
|
|
{ value: '选项3', label: '蚵仔煎' },
|
|
{ value: '选项4', label: '龙须面' }
|
|
],
|
|
value: '',
|
|
gridData: [{
|
|
date: '2016-05-02',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
|
}, {
|
|
date: '2016-05-04',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
|
}, {
|
|
date: '2016-05-01',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
|
}, {
|
|
date: '2016-05-03',
|
|
name: 'John Smith',
|
|
address: 'No.1518, Jinshajiang Road, Putuo District'
|
|
}]
|
|
}
|
|
},
|
|
methods: {
|
|
// v-el-drag-dialog onDrag callback function
|
|
handleDrag() {
|
|
this.$refs.select.blur()
|
|
}
|
|
}
|
|
}
|
|
</script>
|