vue+elementui
表格
<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>
.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;
}
划分线
<el-divider content-position="left" class="poi_title">储值方式</el-divider>
.poi_title .el-divider__text.is-left {
left: 0;
}
.poi_title .el-divider__text {
font-weight: bold;
}
表单
<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
<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>
<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添加样式
下拉框
<el-select placeholder="请选择" v-model="value" size="small">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
删除操作
上传图片
<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>
/*上传图片样式*/
.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后面提示的小字
<span class="note">JSAPI支付授权目录: https://kangyishequ.kangyishequ.com/</span>
.note {
font-size: 12px;
color: rgb(124, 136, 169);
}
el-menu
<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
openDialog() {
// 打开弹出框，并触发父组件的事件传递参数
this.dialogVisible = true;
this.$emit('child-event', 'Hello from child');
},
<OpenAddDepartmentDialog ref="addDepartMentModal" :initial-message="addDepartMentMessage"
@child-event="handleChildEvent" />
handleChildEvent(childMessage) {
// 处理子组件传递的事件和参数
console.log('Received message from child:', childMessage)
// 可以在这里执行其他逻辑或更新父组件的数据
}
描述
消除两个相邻边框重合的边框
border-collapse: collapse;
切换栏
<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>
上传图片
<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>
富文本框
//引入以及工具栏配置
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'], // 清除文本格式
]
export default {
components: {
quillEditor
},
data() {
return {
editorOption: {
modules: {
toolbar: {
container: toolbarOptions, //工具栏相关配置
},
},
}
}
},
}
使用
<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>
日期
<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
@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";
}
表格背景颜色改变
::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文字超出换行显示
::v-deep .tooltipStyle {
display: block;
max-width: 180px;
max-height: 200px;
word-wrap: break-word;
word-break: normal;
white-space: normal;
}
滚动的表格
<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>
插件引入
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)
};
}
},
给父组件一个高度 子组件一个高度，且超出部分隐藏
![[机器学习系列]深入解析K-Means聚类算法：理论、实践与优化](https://img-blog.csdnimg.cn/direct/aea916edec0b4750a552cceef9a766e2.png)
