二、Vue的表格+图片设计
element-ui自带查询框表格
class="InformationTable">
table
:data="
tableData.filter(
(data) =>
!search || data.name.toLowerCase().includes(search.toLowerCase())
)
"
style="width: 100%"
max-height="570"
>
"序号" type="index" align="center" width="100">
column
prop="avatar_square"
label="头像"
align="center"
width="100"
>
"scope">
![]()
"scope.row.avatar_square" width="50" height="50" alt="" />
<div
class="avatar_square_update"
@click="avatarUpdate(scope.row.id)"
>
上传头像
column
label="主理人姓名"
prop="name"
align="center"
width="100"
>
column
label="独家商户"
prop="exclusive"
align="center"
width="100"
>
"手机" prop="mobile" align="center" width="100">
"邮箱" prop="email" align="center" width="100">
"微信" prop="wechat" align="center" width="100">
column
prop="honor"
label="图片管理"
align="center"
width="100"
>
"scope">
for="(imgdata, index) in scope.row.honor" :key="index">
![]()
"imgdata.url" width="50" height="30" alt="" />
"简介" prop="describe" align="center">
"right" width="300">
"header" slot-scope="scope">
class="inputDiv" style="width: 100%; float: right">
input
v-model="search"
size="mini"
placeholder="输入用户名关键字搜索"
style="margin-right: 20px"
/>
"primary" size="mini" @click="channelAdd"
>添加 button
>
"scope">
button
size="mini"
type="success"
@click="honorUpdate(scope.row.id)"
>上传图片 button
>
button
size="mini"
type="success"
@click="handleEdit(scope.$index, scope.row)"
>编辑 button
>
button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除 button
>