携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情
自己在后端学习过程中总要写点界面来美化一下自己想要的结果吧，奈何自己学的不够好，有时候要琢磨很久前端，所以特此写一点现成的，看看以后能不能直接用。这里的项目是我自己随便写的一个奶茶项目，没啥质量，数据也是随便写的。
悬浮框
直接上代码
<el-table
ref="multipleTable"
:data="administrators"
v-loading="loading">
<el-table-column label="编号" prop="id" width="120" align="center"></el-table-column>
<el-table-column label="姓名" prop="name" width="120" align="center"></el-table-column>
<el-table-column label="电话" prop="telephone" width="180" align="center"></el-table-column>
<!--重要的是这里-->
<el-table-column label="店铺编号" prop="storeId" width="120" align="center">
<template slot-scope="scope">
<el-popover
placement="top-start"
width="500"
trigger="hover"
:open-delay="400"
@show="card(scope.row.storeId)">
<show-store :store="store"></show-store>
<el-tag slot="reference">{{ scope.row.storeId }}</el-tag>
</el-popover>
</template>
</el-table-column>
<el-table-column label="角色" prop="role.roleName" width="120" align="center"></el-table-column>
<!-- <el-table-column label="店铺编号" prop="storeId" width="120" align="center"></el-table-column>-->
<el-table-column fixed="right" label="操作" width="350" align="center">
<template slot-scope="scope">
<el-button @click="handleTel(scope.row)" type="primary" size="mini" plain round>修改电话号码
</el-button>
<el-button @click="handleRole(scope.row)" type="primary" size="mini" plain round>修改角色
</el-button>
<el-button @click="handleStore(scope.row)" type="primary" size="mini" plain round>委派店铺
</el-button>
</template>
</el-table-column>
</el-table>
我这里想实现一个鼠标悬浮列表中的一项得到的效果，
对应的方框里面的内容就是
<show-store :store="store"></show-store>
这个组件，:store传递数据，当悬浮上去就会触发@show="card(scope.row.storeId)">事件，对应的方法这样的
card(storeId) {
this.$axios.get(`/admin/store/one/${storeId}`).then((resp) => {
const _this = this
if (resp.code == 200) {
_this.$message({
type: "success",
message: resp.msg,
});
_this.store = resp.data
} else {
_this.$message({
type: "error",
message: resp.msg,
});
}
})
},
那就再放一下悬浮的组件吧
<template>
<el-descriptions title="店铺信息" :column="3" border>
<el-descriptions-item label="店名" label-class-name="my-label" content-class-name="my-content">{{ store.name }}
</el-descriptions-item>
<el-descriptions-item label="电话号码">{{ store.phone }}</el-descriptions-item>
<el-descriptions-item label="工作时间">{{ store.businessHours }}</el-descriptions-item>
<el-descriptions-item label="坐标">{{ store.geohash }}</el-descriptions-item>
<el-descriptions-item label="地址" :contentStyle="{'text-align': 'center'}">{{ store.address }}
</el-descriptions-item>
<el-descriptions-item label="是否停用">
<el-tag size="small">{{ store.delete }}</el-tag>
</el-descriptions-item>
</el-descriptions>
</template>
对话框提交表单
先放结果图
<el-dialog title="加料" :visible.sync="editVisible" width="30%">
<el-form ref="feedForm" :model="feedForm" label-width="70px">
<el-form-item label="名字">
<el-input v-model="feedForm.name"></el-input>
</el-form-item>
<el-form-item label="价格">
<el-input v-model="feedForm.price"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible = false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</el-dialog>
editVisible是bool型的，用于是否弹出，按钮来操作对应的响应，这个没什么好说的。
为分类添加信息
多选框形式
点击添加以后，显示的对话框里面对应多选了对应类型下的所有数据
<el-dialog title="添加" :visible.sync="editVisible" width="30%">
<span>为 {{ curName }} 添加奶茶</span>
<el-table
ref="curSelect"
:data="teamilks"
tooltip-effect="dark"
v-loading="selectLoading"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="奶茶名" width="120">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column prop="price" label="价格" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.price }}</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="editVisible=false">取 消</el-button>
<el-button type="primary" @click="saveEdit">确 定</el-button>
</span>
</el-dialog>
这里需要说明一些细节内容，其中：
:data是表单要绑定的数据，在这里就是teamilks，是我们要进行多选进分类的基础数据，或者说是我们请求到的所有数据。ref是我们多选中的数据的位置，这个里面的数据不在data里面，而是在$refs上，但是刚开始的时候上面是空的，而在这个表格被创建以后，this的对象就指到了上面了，因为如果不把editVisible为true，那么永远拿不到toggleRowSelection这个函数（因为我们跟ref绑定了，所以这个没有在data中出现的对象也有属性，是element-ui帮我们做的）
这里有一个我们修改分类时候的按钮上的方法：
getCateTeamilk(index, row) {
const _this = this;
// 显示对话框
_this.editVisible = true;
_this.selectLoading = true
_this.curName = row.name;
// 这里注意一下，是刚开始的时候我们没有 curSelect 的，但是在点击过一次之后就有这个对象了，需要清除所有选中
if (_this.$refs.curSelect != null)
_this.$refs.curSelect.clearSelection();
// 请求该分类下的所有数据（在这里就是奶茶编号）
_this.$axios.get("/admin/category/get/" + row.id).then(
(resp) => {
if (resp.code == 200) {
// 这里的 toAdd 就是我们原本分类下的所有数据的 id，也就是个数组
_this.toAdd = resp.data;
for (let i = 0; i < _this.toAdd.teamilkIds.length; i++) {
for (let j = 0; j < _this.teamilks.length; j++) {
if (_this.toAdd.teamilkIds[i] == _this.teamilks[j].id) {
_this.$refs.curSelect.toggleRowSelection(_this.teamilks[j]);
break;
}
}
}
} else {
_this.$message({type: "error", message: resp.msg});
}
_this.selectLoading = false
}
);
},
上面一些注释说明了情况，我在这里讲解一下两个for循环，teamilks是所有数据（里面是详细信息，而不是id数组），toAdd就是我们原本分类下的所有数据的 id，我们的操作就是选出在toAdd的id下的奶茶信息加入到_this.$refs.curSelect.toggleRowSelection（如果我们后端得到的就是分类下的信息对象数组，而不是id数组，那就不用这部操作了，因为我们这里被选中的是表格的一行，所以一行就是一个对象，所以curSelect是对象数组）
然后我们里面还有一个多选的handleSelectionChange函数
handleSelectionChange(val) {
this.teamilkItems = val;
},
下拉框格式
这里示例是一个表单的一个属性，所以是el-form-item，懂的话其实不用看就可以了
<el-form-item label="奶茶温度">
<el-select v-model="teamilk.temperatures" multiple placeholder="+New Temperature"
size="mini">
<el-option v-for="item in allTemperatures" :key="item.id"
:label="item.name"
:value="item.id"></el-option>
</el-select>
</el-form-item>
el-select就是下拉框进行选择，el-option就是被选中的√，这个el-option组件 | Element
说明：
multiple表示多选，没什么好说的v-model就是我们选中√的数据信息el-option中的v-for就是所有数据，:label就是我们展示的选项的标签（数据名字），若不设置则默认与:value相同，一般我们不默认。:key就是v-for里面的唯一表示- 而
:value是el-option定义的，意思是选项的值，一般和key相同即可，因为这个value对应的我们设置的id和el-select的v-model里面的数组相互对应，也就是说value的值和v-model要是一个东西
首页数据统计表显示
\
