今天需要在表格中嵌套一个文件上传,并且显示出图片的名字,也可以取消文件上传,最开始我使用render来实现,但是发现render里面上传组件的自定义事件使用无效,于是我们采用了在该文件中全局引用自行封装的组件来实现上传效果,以下是详细代码:
uploads.vue组件
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 | <template> <div> <div class="box"> <div class="current" v-if="file !== null"> {{file.name }} </div> <div class="current" v-else>请选择文件</div> <Upload :before-upload="handleUpload" action="//jsonplaceholder.typicode.com/posts/"> <Button class="btn">选择</Button> </Upload> <div class="cancel" @click="cancel">取消</div> </div> <Button style="display:none" type="text" @click="upload" :loading="loadingStatus">{{ loadingStatus ? '未提交' : '点击提交' }}</Button> </div> </template> <script> export default { name: 'Uploads', props: [], data () { return { file: null, loadingStatus: false, formData: [] } }, methods: { cancel (list) { console.log('点击取消了') this.file = null console.log(list) this.$emit('cancelUploadsFile', list) }, handleUpload (file) { console.log('当前选中====', file.name) this.file = file; this.formData.push(file.name) this.$emit('addUploads', this.formData) console.log('自定义事件this.formData===', this.formData) return false; }, upload () { this.loadingStatus = true; setTimeout(() => { this.file = null; this.loadingStatus = false; this.$Message.success('Success') }, 1500); } } } </script> <style lang="less" scoped> * { margin: 0; padding: 0; } html, body { width: 1000px; height: 700px; } .box { width: 150px; height: 31px; /*border: 1px solid red;*/ line-height: 30px; } .current { width: 80px; height: 100%; color: #bbb; float: left; white-space: nowrap; /*文本不换行*/ overflow: hidden; /*超出隐藏*/ text-overflow: ellipsis; /*显示省略号*/ background-color: rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); } .btn { padding: 5px 2px; width: 40px; height: 100%; float: left; box-sizing: border-box; border: 1px solid rgb(204, 204, 204); } .cancel { width: 40px; height: 30px; float: left; color: #999; margin: -50px 145px; line-height: 30px; cursor: pointer; } </style> |
在需要使用显示的页面全局引用该组件
引入组件
1 | import Uploads from '@/views/content/equip/components/upload/upload.vue' |
注册为全局组件组件
1 2 3 | components: { Uploads } |
在table中使用render生成组件
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 | <Table ref="selection" :columns="columnsTitle" :border='false' :stripe='true' :row-class-name="rowClassName" :data="list"></Table> list: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park' }, { name: 'Jim Green', age: '24242424242424242424242424242424242424242424242424', address: 'London No. 1 Lake Park' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park' }, { name: 'Jon', }, { name: 'Jon Snow', }, { name: 'Jon Snow', }, { name: 'Jon Snow', }, { name: 'Jon Snow', }, { name: 'Jon Snow', }, { name: 'Jon Snow', } ], columnsTitle: [ { title: '标题名称', key: 'name', width: 236, render: (h, params) => { return h('div', [ h('img', { props: { src: "fsdfsdfsdfsd" }, style: { width: '70px', height: '40px', color: 'blue', cursor: 'pointer', display: 'inline-block', float: 'left', }, domProps: { align: 'center', src: './access/logo.png', }, }), h('span', { style: { color: 'rgb(6,129,211)', cursor: 'pointer', display: 'inline-block', width: '115px', height: '40px', float: 'right', lineHeight: '40px', whiteSpace: 'nowrap', /*文本不换行*/ overflow: 'hidden', /*超出隐藏*/ textOverflow: 'ellipsis' /*显示省略号*/ }, on: { click: () => { console.log('当前选中==》', params) } } }, params.row.name) ]) } }, { title: '当前文件名称', width: 150, key: 'age' }, { title: '上传升级文件', key: 'action', width: 230, align: 'center', render: (h, params) => { return h(Uploads, { on: { 'addUploads': (e) => { console.log('成功获到值', e) console.log(this.uploadList.push(e)) //uploadList }, 'cancelUploadsFile': (e) => { console.log('删除列表', e) let index = this.uploadList.indexOf(e); console.log('index====', index) this.uploadList.splice(index, 1) } } }, this.file); } } ], |
延伸解读:
这样就可以实现文件上传了,不过值得注意的是,使用render生成的组件,不可以添加引号,,否则就会报一个did you register the component correctly? For recursive components, make sure to provide the “name” option.的错误,这句话意思为:你正确地注册了这个组件吗?对于递归组件,请确保提供“名称”选项。这时候我们去掉引号就能够正常使用了。
7