12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <!--
- * @Author: your name
- * @Date: 2022-01-07 14:12:57
- * @LastEditTime: 2022-01-08 15:44:36
- * @LastEditors: Please set LastEditors
- * @Description: 右侧默认的组件
- * @FilePath: \goldenPig\src\components\table-cpn\RightHandler.vue
- -->
- <template>
- <div class="right-handler">
- <el-tooltip effect="dark" content="刷新" placement="top">
- <div class="right-a">
- <i class="el-icon-refresh-right i-size"></i>
- </div>
- </el-tooltip>
- <el-tooltip effect="dark" content="密度" placement="top">
- <el-dropdown trigger="click" placement="bottom">
- <div class="right-a">
- <i class="el-icon-rank i-size"></i>
- </div>
- <el-dropdown-menu slot="dropdown" class="reset-dropdown">
- <el-dropdown-item @click.native="clickSize(0)">
- 默认
- </el-dropdown-item>
- <el-dropdown-item @click.native="clickSize(1)">
- 中等
- </el-dropdown-item>
- <el-dropdown-item @click.native="clickSize(2)">
- 紧凑
- </el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
- </el-tooltip>
- </div>
- </template>
- <script>
- export default {
- model: {
- prop: "size",
- event: "sizeChange",
- },
- props: ["size"],
- data() {
- return {
- sizeArr: ["small", "medium", "mini"],
- };
- },
- methods: {
- clickSize(index) {
- this.$emit("sizeChange", this.sizeArr[index]);
- },
- },
- };
- </script>
- <style scoped>
- .right-handler {
- display: flex;
- }
- .right-a {
- display: flex;
- flex-direction: row;
- align-items: center;
- }
- .i-size {
- font-size: 20px;
- cursor: pointer;
- margin-left: 10px;
- }
- .reset-dropdown {
- margin-left: 6px;
- }
- </style>
|