vue+elementui（笔记）

种一个月亮 ୧2024-04-30 14:17

vue+elementui

表格

html 复制代码 
 <div class="tableStyle">
            <el-table :data="pointsSettingsTableData" style="width: 70%" :stripe="true" size="mini"
              header-cell-class-name="headerClassName" :cell-style="{ 'text-align': 'center' }" :border="true"
              :fit="true">
              <el-table-column prop="id" label="ID">
              </el-table-column>
              <el-table-column prop="memberLevel" label="会员级别">
              </el-table-column>
              <el-table-column prop="projectName" label="项目名称">
              </el-table-column>
              <el-table-column prop="pointsRules" label="积分规则">
              </el-table-column>
              <el-table-column prop="integralNum" label="积分/次">
              </el-table-column>
              <el-table-column prop="amount" label="金额">
              </el-table-column>
              <el-table-column prop="integral" label="积分">
              </el-table-column>
              <el-table-column prop="multiplierOfPoints" label="积分倍数">
              </el-table-column>
              <el-table-column prop="是否累计" label="是否累计">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small">刪除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background layout="prev, pager, next" :total="1000">
            </el-pagination>
          </div>
css 复制代码 
.tableStyle {
  padding: .125rem 0;
  display: flex;
  flex-direction: column;
  width: 80%;
}

.tableStyle .el-pagination {
  align-self: flex-start;
  margin: .125rem 0;
}

/*設置表头背景以及字体顏色*/
.headerClassName {
  font-weight: bold;
  color: black;
  background-color: rgb(226, 226, 226) !important;
  text-align: center !important;
}
.el-table__row--striped {
  background-color: rgb(242, 242, 242) !important;

}

划分线

html 复制代码 
 <el-divider content-position="left" class="poi_title">储值方式</el-divider>
css 复制代码 
.poi_title .el-divider__text.is-left {
  left: 0;
}

.poi_title .el-divider__text {
  font-weight: bold;
}

表单

html 复制代码 
  <el-form ref="form" :model="form" label-width="100px" style="width:50%" size="mini">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="储值方式：">
                <el-input v-model="form.name" placeholder="请输入储值方式："></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" size="mini"><i class="iconfont icon-tianjia1"></i>添加</el-button>
            </el-col>
          </el-row>
        </el-form>

dialog

vue 复制代码 
<template>
    <div>
        <el-dialog :visible.sync="dialogVisible" :modal="true" :append-to-body="true" :close-on-click-modal="false">
            <el-tabs>
                <el-tab-pane label="赠送项目成本信息">
                    <el-form ref="form" :model="form" label-width="100px" size="mini">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆品牌">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆颜色">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆系列">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆型号">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆产地">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="车辆用途">
                                    <el-input v-model="initialMessage"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
            <span slot="title" class="dialog-title">
                <span><i class="el-icon-warning"></i>会员审核</span>
            </span>
            <span slot="footer" class="dialog-footer">
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>  
    
<script>
export default {
    props: {
        initialMessage: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            dialogVisible: false, // 控制弹出框的显示与隐藏  
            message: this.initialMessage // 初始化时接收父组件传递的参数  
        };
    },
    methods: {
        openDialog() {
            // 打开弹出框，并触发父组件的事件传递参数  
            this.dialogVisible = true;
            this.$emit('child-event', 'Hello from child');
        },
        closeDialog() {
            // 关闭弹出框  
            this.dialogVisible = false;
        }
    },
    watch: {
        initialMessage(newValue) {
            // 监听父组件传递的参数变化，并更新子组件的数据  
            this.message = newValue;
        }
    }
};
</script>
<style>
    /*以下是关于弹出框的样式*/

.dialog-footer {
  text-align: center;
}

/*dialog主体的宽*/
.el-dialog {
  width: 25vw !important;
  margin-top: 20vh !important;
  max-height: 85vh;
}

.dialog-title {
  width: 100%;
  font-size: .1875rem !important;
  color: white;
  font-weight: bold;

}

.el-dialog__header {
  padding-top: .125rem !important;
  background-image: linear-gradient(to right, rgb(254, 91, 75), rgb(249, 200, 38));
  border-radius: .125rem .125rem 0 0 !important;
}

/*改变dialog高度*/
.dialogContent {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.el-dialog {
  border-radius: .125rem !important;
}

.el-dialog__body {
  padding: .25rem;
}
</style>
vue 复制代码 
<AddCarModal ref="addCarModal" :initial-message="addCarMessage" @child-event="handleChildEvent" />

<el-button type="primary" @click="openAddCarDialog"><i class="iconfont icon-tianjia1"></i>添加</el-button>

handleChildEvent(childMessage) {
      // 处理子组件传递的事件和参数
      console.log('Received message from child:', childMessage)
      // 可以在这里执行其他逻辑或更新父组件的数据
    },

 openAddCarDialog() {
      this.$refs.addCarModal.openDialog()
    },

给dialog添加样式

下拉框

vue 复制代码 
<el-select placeholder="请选择" v-model="value" size="small">
      <el-option label="区域一" value="shanghai"></el-option>
       <el-option label="区域二" value="beijing"></el-option>
</el-select>

删除操作

上传图片

html 复制代码 
 <el-upload class="upload-demo" ref="upload" :data="form" :on-preview="handlePreview"
                                :auto-upload="false" :on-success="handleUploadSuccess">
                                <i class="el-icon-camera avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip"> 图片上传 </div>
</el-upload>
css 复制代码 
/*上传图片样式*/
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: .875rem;
    height: .875rem;
    line-height: .875rem;
    text-align: center;
}

.el-upload {
    border: 1px solid rgb(203, 203, 203);
}

.el-upload__tip {
    width: .875rem;
    text-align: center;
}

input后面提示的小字

html 复制代码 
<span class="note">JSAPI支付授权目录: https://kangyishequ.kangyishequ.com/</span>
css 复制代码 
.note {
    font-size: 12px;
    color: rgb(124, 136, 169);
}

el-menu

vue 复制代码 
<template>
   <el-menu :default-active="plat_defaultIndex" class="el-menu-demo" mode="horizontal" @select="plat_handleSelect">
                <el-menu-item index="plat_tag1">基础设置</el-menu-item>
                <el-menu-item index="plat_tag2">注册协议</el-menu-item>
                <el-menu-item index="plat_tag3">短信设置</el-menu-item>
                <el-menu-item index="plat_tag4">支付设置</el-menu-item>
            </el-menu>
 <div class="platformMain" v-if="plat_activeIndex === 'plat_tag3'">
            <el-divider content-position="left" class="plat_title">短信设置</el-divider>
            <el-form ref="form" :model="form" label-width="160px" style="width:30%" size="mini">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="短信状态：">
                            <el-radio v-model="radio" label="1">开启</el-radio>
                            <el-radio v-model="radio" label="0">关闭</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="短信接口：">
                            <el-select placeholder="请选择活动区域">
                                <el-option label="1位数" value="1"></el-option>
                                <el-option label="2位数" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="AccessKey ID">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="AccessKey Secret">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="短信签名">
                            <el-input></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="saveStyle">
                <el-button type="primary">保存</el-button>
            </div>
        </div>
</template>
<script>
export default {
    data() {
        return {
            plat_defaultIndex: 'plat_tag1',
            plat_activeIndex: 'plat_tag1',
        }
    },
    methods: {
        plat_handleSelect(key, keyPath) {
            this.plat_activeIndex = key
        }
    },
  
}
</script> 
<style>
    .platformMain {
    background-color: #fff;
    width: 100%;
    padding: .125rem .25rem;
    flex: 1;
    margin-top: .25rem;
}
</style>

emit

js 复制代码 
openDialog() {
            // 打开弹出框，并触发父组件的事件传递参数  
            this.dialogVisible = true;
            this.$emit('child-event', 'Hello from child');
        },
html 复制代码 
<OpenAddDepartmentDialog ref="addDepartMentModal" :initial-message="addDepartMentMessage"
            @child-event="handleChildEvent" />
js 复制代码 
handleChildEvent(childMessage) {
      // 处理子组件传递的事件和参数
      console.log('Received message from child:', childMessage)
      // 可以在这里执行其他逻辑或更新父组件的数据
    }

描述

消除两个相邻边框重合的边框

css 复制代码 
border-collapse: collapse;

切换栏

vue 复制代码 
<template>
    <div class="adminSettingContainer">
        <div class="adminSettingNav">
            <el-menu :default-active="admin_defaultIndex" class="el-menu-demo" mode="horizontal"
                @select="admin_handleSelect">
                <el-menu-item index="admin_tag1">管理员配置</el-menu-item>
                <el-menu-item index="admin_tag2">角色配置</el-menu-item>
            </el-menu>
        </div>
        <div class="adminSettingMain" v-if="admin_activeIndex === 'admin_tag1'">
            <el-button type="primary" @click="openAddAdminDialog">添加管理员</el-button>
            <div class="tableStyle">
                <el-table :data="pointsSettingsTableData" style="width: 100%" :stripe="true" size="mini"
                    header-cell-class-name="headerClassName" :cell-style="{ 'text-align': 'center' }" :border="true"
                    :fit="true">
                    <el-table-column prop="id" label="编号">
                    </el-table-column>
                    <el-table-column prop="account" label="账号">
                    </el-table-column>
                    <el-table-column prop="type" label="所属类型">
                    </el-table-column>
                    <el-table-column prop="role" label="所属角色">
                    </el-table-column>
                    <el-table-column prop="stores" label="所属门店">
                    </el-table-column>
                    <el-table-column prop="affiliation" label="所属部门">
                    </el-table-column>
                    <el-table-column prop="materialDiscountRange" label="材料折扣区间">
                    </el-table-column>
                    <el-table-column prop="timeDiscountRange" label="工时折扣区间">
                    </el-table-column>
                    <el-table-column prop="founder" label="创始人">
                    </el-table-column>
                    <el-table-column prop="creationTime" label="创建时间">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small">刪除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
        <div class="adminSettingMain" v-if="admin_activeIndex === 'admin_tag2'">
            <el-button type="primary">添加角色</el-button>
            <div class="tableStyle">
                <el-table :data="pointsSettingsTableData" style="width: 50%" :stripe="true" size="mini"
                    header-cell-class-name="headerClassName" :cell-style="{ 'text-align': 'center' }" :border="true"
                    :fit="true">
                    <el-table-column prop="id" label="编号">
                    </el-table-column>
                    <el-table-column prop="permissionGroupName" label="权限组名称">
                    </el-table-column>
                    <el-table-column prop="founder" label="创始人">
                    </el-table-column>
                    <el-table-column prop="creationTime" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small">刪除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </div>
        <AddAdminModal ref="addAdminModal" :initial-message="addAdminMessage" @child-event="handleChildEvent" />
    </div>
</template>
<script>
import AddAdminModal from '../adminSettingModal/AddAdminModal.vue'
export default {
    data() {
        return {
            admin_defaultIndex: 'admin_tag1',
            admin_activeIndex: 'admin_tag1',
            addAdminMessage:''
        }
    },
    methods: {
        admin_handleSelect(key, keyPath) {
            this.admin_activeIndex = key
        },
        openAddAdminDialog(){
            this.$refs.addAdminModal.openDialog()
        }
    },
    components:{
        AddAdminModal
    }
}
</script>
<style>
.adminSettingContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.adminSettingMain {
    background-color: #fff;
    width: 100%;
    padding: .125rem .25rem;
    flex: 1;
    margin-top: .25rem;
}

.tableStyle {
    padding: .125rem 0;
    display: flex;
    flex-direction: column;
    width: 80%;
}

.tableStyle .el-pagination {
    align-self: flex-start;
    margin: .125rem 0;
}

/*設置表头背景以及字体顏色*/
.headerClassName {
    font-weight: bold;
    color: black;
    background-color: rgb(226, 226, 226) !important;
    text-align: center !important;
}

.el-table__row--striped {
    background-color: rgb(242, 242, 242) !important;

}
</style>

上传图片

html 复制代码 
<el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="商家LOGO：">
                            <el-upload class="upload-demo" ref="upload" :data="form" :on-preview="handlePreview"
                                :auto-upload="false" :on-success="handleUploadSuccess">
                                <i class="el-icon-camera avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip"> 图片上传 </div>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>

富文本框

js 复制代码 
//引入以及工具栏配置
import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";


// 工具栏配置

const toolbarOptions = [
    ['bold', 'italic'], // 加粗 斜体 下划线 删除线
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
]
js 复制代码 
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions, //工具栏相关配置
                    },
                },
            }
        }
    },
}

使用

html 复制代码 
<el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item>
                            <quill-editor class="editor" v-model="content" ref="customQuillEditor" :options="editorOption">
                            </quill-editor>
                        </el-form-item>
                    </el-col>
                </el-row>

日期

html 复制代码 
  <el-descriptions-item label="生日截止:">
                        <el-date-picker type="date" placeholder="选择日期" :size="size" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-descriptions-item>

iconfont

css 复制代码 
@font-face {
  font-family: "iconfont";
  /* Project id 4506265 */
  src:
  /* 文件下载到本地，且换成相对路径 */
    url('./iconfont/iconfont.woff2') format('woff2'),
    url('./iconfont/iconfont.woff') format('woff'),
    url('./iconfont/iconfont.ttf') format('truetype'),
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 用户 */
.icon-yonghu:before {
  content: "\e639";
}

/* 系统挂起 */
.icon-xitong:before {
  content: "\e618";
}


/* 密码修改 */
.icon-yuechi:before {
  content: "\e791";
}

/* 退出 */
.icon-tuichu:before {
  content: "\e62c";
}

表格背景颜色改变

css 复制代码 
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
    background-color: transparent;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background: blue;
}

tooltip文字超出换行显示

css 复制代码 
::v-deep .tooltipStyle {
    display: block;
    max-width: 180px;
    max-height: 200px;
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
}

滚动的表格

html 复制代码 
  <div class="rail_right">
                <div class="checkNum">
                    <div class="chart_title">实时检测数量</div>
                    <div class="table">
                        <el-table :header-cell-style="headerCellStyle">
                            <el-table-column prop="proName" label="项目" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="major" label="专业" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="bridge" label="隧道/桥梁" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="state" label="状态">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="chart_table">

                        <vueSeamless class="seamStyle" :data="tableData" :class-option="seamlessScrollOption">
                            <el-table :show-header="false" :data="tableData" stripe :row-class-name="onTableRowClassName">
                                <el-table-column prop="proName" label="项目" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="major" label="专业" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="bridge" label="隧道/桥梁" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="state" label="状态">
                                    <template slot-scope="scope">
                                        <span style="font-weight:bold;color: yellow;" v-if="scope.row.state == 1">待检测</span>
                                        <span style="font-weight:bold;color: red;"
                                            v-else-if="scope.row.state == 2">未达标</span>
                                        <span style="font-weight:bold;color: #00FF00;"
                                            v-else-if="scope.row.state == 3">合格</span>
                                        <span style="font-weight:bold;color: rgb(48, 48, 250);"
                                            v-else-if="scope.row.state == 5">已移交</span>
                                        <span style="font-weight:bold;color: grey;" v-else>空</span>

                                    </template>
                                </el-table-column>
                            </el-table>
                        </vueSeamless>
                    </div>
                </div>
                <div class="analysis">
                    <div class="chart_title">每日检测数量分析</div>
                    <div class="detection_chart">
                        <detectionAnalysis :opinionData="analysisData" ref="analysisChart" />
                    </div>
                </div>
            </div>

插件引入

js 复制代码 
import vueSeamless from 'vue-seamless-scroll'
  components: {  vueSeamless },
      
       computed: {
        seamlessScrollOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        }
    },

给父组件一个高度 子组件一个高度，且超出部分隐藏

相关推荐
J总裁的小芒果16 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
yqcoder22 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
Komorebi.py2 小时前
【Linux】-学习笔记05
linux·笔记·学习
亦枫Leonlew2 小时前
微积分复习笔记 Calculus Volume 1 - 6.5 Physical Applications
笔记·数学·微积分
ggdpzhk3 小时前
VUE：基于MVVN的前端js框架
前端·javascript·vue.js
冰帝海岸7 小时前
01-spring security认证笔记
java·笔记·spring
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js：提升开发效率，更轻量、更高效的状态管理方案！
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 小时前
在Vue中，vue document.onkeydown 无效
前端·javascript·vue.js
小二·8 小时前
java基础面试题笔记（基础篇）
java·笔记·python
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作