文章目录
1. el-dialog
父子组件的传值
绑定父子组件的显示/不显示
父组件:dialog-visible=“isVisible”
子组件:visible.sync=“isVisible”
父组件
值的父传子用冒号 方法的父传子用艾特
:dialog-visible=“isVisible” // 对话框是否显示
:id=“id” // 向子组件传ID值
:dialogTitle=“dialogTitle” // 向子组件传标题值
@initUserList=“initUserList” // 向子组件传数据初始化方法
@success=“editSuccess” // 向子组件传成功消息方法
@close=“editClose” // 向子组件传关闭方法
- html代码
<!-- 新增/修改对话框 -->
<Dialog
:dialog-visible="isVisible"
:id="id"
:dialogTitle="dialogTitle"
@initUserList="initUserList"
@success="editSuccess"
@close="editClose"
></Dialog>
- 导入子组件
import Dialog from "./components/dialog";
- 注册子组件
components: {
Dialog,
},
- 对话框是否显示的data值
// 新增修改会话框
isVisible: false,
// 利用这个值区分是新增还是修改
id:1,
- 获取后台用户信息数据方法
initUserList() {
getUser(this.queryForm).then((res) => { // 异步方法【已封装接口】
// console.log(res);
this.tableData = res.userList;
this.total = res.total;
setTimeout(() => {
this.loading = false;
}, 500);
});
},
- 成功和关闭方法
// 成功信息
editSuccess() {
this.$message({
message: this.$i18n.t("el.colorpicker.confirm"),
type: "success",
});
},
// 关闭对话框
editClose() {
this.isVisible = false;
},
- 新增按钮触发的事件/修改按钮触发的事件
// 增加用户的对话框
handleAddDialogValue() {
this.id = -1; // 如果是新增 赋值为-1
this.dialogTitle = "用户添加"; // 标题修改
this.isVisible = true; // 对话框可以显示
},
// 修改用户的对话框
handleDialogValue(row) {
this.id = row.id; // 如果是修改 赋值为当前行的id
this.dialogTitle = "用户修改"; // 标题修改
this.isVisible = true; // 对话框可以显示
},
子组件
:visible.sync=“isVisible” // 对话框是否显示
:title=“dialogTitle” // 对话框标题
el-form// form表单
ref=“formRef” //【重要】获取el-form表单对象。ref 绑定控件，$refs 获取控件。
:model=“form” //【重要】双向绑定数据
:rules=“rules” // 验证规则
label-width=“100px”
- html代码
<!-- 新增/修改对话框 -->
<el-dialog :visible.sync="isVisible" :title="dialogTitle" width="30%">
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
<el-form-item label="用户名" prop="username">
<el-input
v-model="form.username"
:disabled="form.id == -1 ? false : 'disabled'"
/>
<el-alert
v-if="form.id == -1"
title="默认初始密码：123456"
:closable="false"
style="line-height: 10px"
type="success"
>
</el-alert>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="handleConfirm">确认</el-button>
<el-button @click="close">取消</el-button>
</span>
</template>
</el-dialog>
- 接收父组件传的数据
// 接收父组件传过来的值 使用其中的值一样用this
props: {
id: { // 判断显示的ID值
type: Number, // 数据类型
required: true,
},
dialogTitle: { // 对话框标题
type: String, // 数据类型
default: "",
required: true,
},
dialogVisible: {
type: Boolean,
},
},
- 将isVisible设置为计算属性
- get 方法返回 this.dialogVisible 的值【true】
- set 方法调用 this.close() 方法【这个方法中调用父组件的关闭方法使isVisible = false】
computed: {
isVisible: {
get() { // computed自带的get和set方法
return this.dialogVisible;
},
set() {
this.close(); // 调用子组件的关闭方法
},
},
dialogVisiblefn() {
if (this.dialogVisible != false) {
return this.dialogVisible;
}
},
},
- 因为是父子组件 如果用created那么两者的初始化方法都会进行 但子组件是在增加/修改点击事件触发后才进行初始化
- 所以我们结合computed对dialogVisible监听
watch: {
// 对props的数据进行监听
// 结合computed
dialogVisiblefn(newValue) {
let id = this.id;
if (id != -1) { // 如果不是新增方法
this.initFormData(id); // 就利用后端接口获取当前修改信息
} else {
// 否则 就是新增方法
this.form = {
id: -1,
};
}
},
},
- data数据
// 表格数据
form: {},
- methods
// 获取当前这一行的数据
initFormData(id) {
getUserId(id).then((res) => {
this.form = res.sysUser; // 修改数据
});
},
// 关闭方法
close() {
this.$emit("close"); // 调用父组件的关闭方法
this.form = {}; // 关闭后清空子组件的form表单
},
// 清空表格
resetForm() {
this.$refs.formRef.clearValidate(); // 清除验证方法
this.$refs.formRef.resetFields(); // 清空
},
// 确认按钮
// 使用.then的方法是不能在异步中写异步
// 所以需要借助一个中间值进行判断再做一个异步方法【这里使用的是mark】
handleConfirm() {
this.$refs["formRef"].validate((valid) => {
if (valid) {
if (this.form.id == -1) {
// 设置默认密码 如果id为-1代表是新增 新增检查用户名是否存在
this.form.password = 123456;
getUserName(this.form).then((res) => {
if (res.code == 500) {
this.mark = false;
this.$message.error(new Error("用户名已存在！"));
this.resetForm();
this.close();
}
});
}
// 新增/修改用户信息
if ((this.mark = true)) {
// 这里新增和修改用的同一个接口
SaveUser(this.form).then((result) => {
if (result.code == 200) {
this.$message.success("success");
this.$emit("initUserList"); // 调用父组件的方法
} else {
this.$message.error(res.msg);
}
});
}
this.resetForm();
this.close();
} else {
this.$message.warn("fail");
}
});
},
非父子组件
简单的el-card
- 直接在el-table旁边建立card
- html代码
<el-card>
<div slot="header" class="clearfix">
// 根据id判断是增加还是修改
// 这里创建了一个news【form表单】用于存储显示增加/修改数据
<span>{{ news.id === "" ? "增加" : "修改" }}</span>
<span>{{ data.id }}</span>
</div>
</el-card>
ref=“forms” //【重要】获取el-form表单对象。ref 绑定控件，$refs 获取控件。
:model=“news” //【重要】双向绑定数据
label-width=“70px”
:rules=“rules” // 验证规则
<el-form
ref="forms"
:model="news"
label-width="70px"
:rules="rules"
>
<el-form-item label="标题" prop="title">
<el-input v-model="news.title" placeholder="请输入标题" />
</el-form-item>
</el-form>
- 增加按钮触发方法/修改按钮触发方法
// 增加框
add() {
this.resetForm(); // 调用前先清除数据
this.$message({
message: "请输入相关信息",
type: "info",
});
},
// 修改框
edit(row) {
this.$refs.forms.clearValidate(); // 调用前先清除校验规则
// 因为使用的是el-table
// 点击按钮是可以获取当前行的值
// 即不需要利用后台接口获取当前行的值
// 直接赋值【news要在data中定义】
this.news = { ...row };
},
- 提交按钮 接口判断
submit() {
// 先校验
this.$refs.forms.validate((valid) => {
if (valid) {
this.buttonLoading = true;
this.news.createBy = localStorage.getItem("id");
// 是通过id去判断是增加还是修改
// 所以在新增按钮的时候不对news进行赋值 就不会存在id
// 反之修改存在id
// 修改
if (this.news.id) {
newsUpdate(this.news).then((res) => {
this.buttonLoading = false;
this.$message({
message: "成功修改！",
type: "success",
});
console.log(res);
this.getAllNews();
this.$refs.upload.clearFiles(); // 清除上传文件
this.resetForm();
});
} else {
// 否则是增加
newsAdd(this.news).then((res) => {
this.buttonLoading = false;
console.log(res);
this.$message({
message: "成功增加！",
type: "success",
});
this.getAllNews();
this.$refs.upload.clearFiles(); // 清除上传文件
this.resetForm();
});
}
} else {
return false;
}
});
},
直接的el-dialog
- html代码
- 点击按钮触发的事件即是设置dialog是否显示
- 设置一个formId判断是增加还是修改
<el-dialog
:title="formId === '' ? '增加' : '修改'"
width="60%"
top="30px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:visible.sync="isVisible"
>
<!-- 传过来的form表单 -->
<el-form
ref="forms"
:rules="rules"
:model="form"
label-position="right"
label-width="100px"
>
<el-form-item label="标题" prop="summary">
<el-input v-model="form.summary" placeholder="请输入标题" />
</el-form-item>
</el-form>
<!-- 取消和提交按钮 -->
<div slot="footer" class="dialog-footer" style="margin-top: 50px">
<el-button type="warning" plain @click="isVisible = false">
取消
</el-button>
<el-button type="primary" plain @click="submitForm">{{
formId === "" ? "增加" : "修改"
}}</el-button>
</div>
</el-dialog>
- data数据
form: {
content: "",
summary: "",、
isComment: "1",
},
formId: "", // 这个属性判断标题/提交是增加还是修改
- 增加按钮触发事件/修改按钮触发事件
// 增加框
add() {
console.log(this.form);
setTimeout(() => {
this.resetForm();
}, 10);
this.isVisible = true; // 显示对话框
},
// 修改框
edit(row) {
this.form = { ...row }; // 对表单进行赋值
console.log(this.form);
this.formId = 1; // formId判断是增加还是修改
this.isVisible = true; // 显示对话框
},
- 提交事件
submitForm() {
this.$refs.forms.validate((valid) => {
if (valid) {
console.log(this.form);
// 修改
if (this.form.id) {
updateArticle(this.form).then((res) => {
console.log(res);
this.$message({
message: "恭喜修改",
type: "success",
});
this.gethotArticle();
this.isVisible = false;
this.resetForm();
});
} else {
// 否则是增加
addArticle(this.form).then((res) => {
console.log(res);
this.$message({
message: "成功添加",
type: "success",
});
this.gethotArticle();
this.isVisible = false;
this.resetForm();
});
}
} else {
return false;
}
});
},
2. filters过滤筛选
多个值+筛选
- html代码
:filters过滤数据:filter-method筛选方法
<el-table-column
label="审批状况"
prop="nodeStatus"
:filters="[
{ text: '未审批', value: '0' },
{ text: '辅导员通过', value: '1' },
{ text: '辅导员驳回', value: '2' },
]"
:filter-method="filterState"
:show-overflow-tooltip="true"
align="center"
min-width="100px"
>
<template slot-scope="{ row }">
<!-- el-tag的过滤 -->
<el-tag :type="row.nodeStatus | stateFilter">
<!-- transState筛选 -->
{{ transState(row.nodeStatus) }}
</el-tag>
</template>
</el-table-column>
filters: {
stateFilter(state) {
const map = {
0: "info",
1: "success",
2: "warning",
};
return map[state];
},
},
- 筛选方法
filterState(value, row) {
return row.nodeStatus == value;
},
- 点击事件
transState(level) {
switch (level) {
case "0":
return "未审批";
case "1":
return "辅导员通过";
case "2":
return "辅导员驳回";
default:
return "已结束";
}
},
两个值+筛选
- html代码
:filters过滤数据:filter-method筛选方法
<el-table-column
label="是否需要离校"
prop="leaveSchool"
:filters="[
{ text: '需要', value: '1' },
{ text: '不需要', value: '0' },
]"
:filter-method="filterSchool"
:show-overflow-tooltip="true"
align="center"
min-width="90px"
>
<template slot-scope="{ row }">
<el-tag :type="row.leaveSchool | schoolFilter">
{{ row.leaveSchool === "1" ? "需要" : "不需要" }}
</el-tag>
</template>
</el-table-column>
filters: {
schoolFilter(state) {
const map = {
1: "warning",
0: "info",
};
return map[state];
},
},
- 筛选方法
filterSchool(value, row) {
return row.leaveSchool == value;
},
过滤时间
<el-table-column prop="totalTime" label="学习总时长" align="center">
<template slot-scope="scope">
{{ scope.row.totalTime | filterTime }}
</template>
</el-table-column>
filters: {
// 过滤方法
filterTime: function (val) {
// 将毫秒变成分钟
let data = parseInt((val % (1000 * 60 * 60)) / (1000 * 60));
// 将毫秒变成小时
if (data > 60) {
data = parseInt((val % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
data += "小时";
} else {
data += "分钟";
}
// 返回数据
return data;
},
},
3. el-select
单选
allCollege和list 都是通过后台接口得到的数据
label 显示出来的值
value 值 【传给后端的是这个值】
<el-form-item label="学院名称" prop="collegeId">
<el-select
v-model="classes.collegeName"
style="width: 100%"
placeholder="学院名称"
>
<!-- 双向绑定的值一般和prop的是一样的 -->
<el-option
v-for="thesis in allCollege"
:key="thesis.id"
:label="thesis.name"
:value="String(thesis.id)"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="竞赛名称" prop="cause">
<el-select v-model="form.cause" placeholder="请选择竞赛名称">
<el-option
v-for="dict in list"
:key="dict.id"
:label="dict.contestName"
:value="dict.contestName"
/>
</el-select>
</el-form-item>
多选
- multiple
<el-form-item label="辅导员名称" prop="teacherIds">
<el-select
v-model="classes.teacherIds"
filterable
allow-create
default-first-option
multiple
value=""
placeholder="辅导员名称"
style="width: 100%"
>
<el-option
v-for="thesis in allTeacher"
:key="thesis.id"
:label="thesis.nickName"
:value="String(thesis.id)"
/>
</el-select>
</el-form-item>
4. el-radio
- el-radio 无法数据回显
- 这个首先需要知道返回的数据是什么类型的
- 是String类型还是Integer类型
el-radio-group
- 因为后台数据返回的是字符串类型
<el-form-item label="审批状况" prop="nodeStatus">
<el-radio-group v-model="leave.nodeStatus">
<el-radio :label="'0'">未审批</el-radio>
<el-radio :label="'1'">辅导员通过</el-radio>
<el-radio :label="'2'">辅导员驳回</el-radio>
</el-radio-group>
</el-form-item>
非el-radio-group
<el-radio v-model="queryParams.status" label="1">发布</el-radio>
<el-radio v-model="queryParams.status" label="2">未发布</el-radio>
循环
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in status1"
:key="dict.value"
:label="dict.value"
>{{ dict.label }}</el-radio
>
</el-radio-group>
- data数据
status1: [
{
value: "0",
label: "正常",
},
{
value: "1",
label: "异常",
},
],
5. el-table的插槽
<el-table-column prop="title" label="标题" width="220px" align="center">
<!-- 插槽内容 为了在表格中设置点击事件-->
<template slot-scope="scope">
<div
@click="getNoticeSelect(scope.row)"
>
{{ scope.row.title }}
</div>
</template>
</el-table-column>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
