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=<