iview 表格里面上传图片功能
时间: 2023-12-14 19:38:37 浏览: 33
iview 表格中上传图片功能可以通过使用 i-upload 组件来实现。你可以在表格的列定义中添加一个自定义的渲染函数,该函数返回 i-upload 组件。例如:
```html
<template>
<Table :columns="columns" :data="tableData"></Table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
name: 'John',
age: 30,
avatar: '',
},
{
name: 'Jane',
age: 25,
avatar: '',
},
],
columns: [
{
title: 'Name',
key: 'name',
},
{
title: 'Age',
key: 'age',
},
{
title: 'Avatar',
key: 'avatar',
render: (h, params) => {
return h('i-upload', {
props: {
action: 'your_upload_api_url',
showUploadList: false,
headers: {
Authorization: 'Bearer ' + localStorage.getItem('token'),
},
},
on: {
'on-success': response => {
// 上传成功后,将图片地址保存到表格数据中
this.tableData[params.index].avatar = response.data.url;
},
},
}, [
h('Button', {
props: {
type: 'primary',
},
}, 'Upload Image'),
]);
},
},
],
};
},
};
</script>
```
在这个例子中,我们在列定义中添加了一个名为 avatar 的列,该列的渲染函数返回了一个 i-upload 组件,用于在表格中上传图片。我们指定了上传图片的 API 地址、请求头以及一些其他属性,如 showUploadList 用于控制上传成功后是否显示上传列表。当上传成功后,我们将图片地址保存到相应的表格数据中。
注意:这里的上传地址和请求头需要根据你的实际情况进行修改。同时,i-upload 组件需要在你的组件中进行引入,例如:
```js
import { Upload } from 'iview';
```
希望这个例子对你有所帮助!