自己写的
父组件
<template>
<ly-grid>
<div class="tools">
<el-input class="search" placeholder="请输入内容" v-model.trim="keyWord"
clearable @keyup.native.enter="searchInput">
</el-input>
<el-button type="info" plain class="button" @click="batchDel" >批量删除</el-button>
<el-button type="success" plain class="button" @click="addItem">添加</el-button>
</div>
<el-table :data="tableData" ref="multipleTable" :row-key="getRowKey"
@selection-change="handleSelectionChange">
<el-table-column type="selection" :reserve-selection="true"></el-table-column>
<el-table-column align="center" label="序号" width="60">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column align="center" label="专利号" width="200">
<template slot-scope="scope"> {{ scope.row.patent_sn }}</template>
</el-table-column>
<el-table-column align="center" label="专利名称" width="360">
<template slot-scope="scope">
<text-over-tooltip refName="testName" :content="scope.row.patent_name"></text-over-tooltip>
</template>
</el-table-column>
<el-table-column align="center" label="申请人" width="160">
<template slot-scope="scope"> {{ scope.row.patent_person }}</template>
</el-table-column>
<el-table-column align="center" label="申请日" width="160">
<template slot-scope="scope"> {{ scope.row.apply_date }}</template>
</el-table-column>
<el-table-column align="center" label="是否监控">
<template slot-scope="scope"> {{ scope.row.is_monitor ? "已监控" : "未监控" }}</template>
</el-table-column>
<el-table-column align="center" label="管理人" width="160">
<template slot-scope="scope">{{ scope.row.username }}</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="primary" plain @click.native.prevent="editRow(scope.row)">编辑</el-button>
<el-button type="danger" plain @click.native.prevent="delRow(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<form-dialog v-if="showDialog" ref="formDialog" :edit-id="editId"
:dialog-title="dialogTitle" :item-info="tableItem"
@closeDialog="closeDialog"></form-dialog>
</ly-grid>
</template>
<script>
import formDialog from "./component/formDialog";
import textOverTooltip from "./component/textOverTooltip";
import { fetchList, deleteObject } from "@/api/patent/patent.js";
export default {
name: "DialogDemo",
components: { formDialog ,textOverTooltip},
data() {
return {
tableItem: {
patent_sn: "",
apply_date: "",
patent_name: "",
patent_person: "",
},
dialogTitle: "添加人员",
multipleTable: [],
showDialog: false,
tableData: [],
keyWord: "",
editId: 0,
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
const that = this;
fetchList().then((response) => {
that.tableData = response.data.items;
}).catch(() => { });
},
handleSelectionChange(val) {
this.multipleTable = val;
},
getRowKey(row) {
return row.id;
},
searchInput() {
let searchList = new Array();
if (this.keyWord.length > 0) {
searchList = this.tableData.filter(
(array) =>
array.patent_name.match(this.keyWord) ||
array.patent_sn.match(this.keyWord)
);
this.tableData = searchList;
} else {
this.fetchData();
}
},
addItem() {
this.tableItem = {
patent_sn: "",
apply_date: "",
patent_name: "",
patent_person: "",
};
this.dialogTitle = "添加人员";
this.showDialog = true;
this.$nextTick(() => {
this.$refs["formDialog"].showDialog = true;
this.$refs.wordSpan.innerHTML="created中更改了内容"
});
},
editRow(row) {
this.tableItem = row;
this.editId = row.id;
this.dialogTitle = "编辑人员";
this.showDialog = true;
this.$nextTick(() => {
this.$refs["formDialog"].showDialog = true;
});
},
delRow(row) {
deleteObject(row.id).then((res) => {
this.$message({
type: "success",
message: "删除成功",
});
this.fetchData();
}).catch(() => {});
},
batchDel() {
let ids = [];
this.multipleTable.forEach(function (item) {
ids.push(item.id);
});
this.$confirm("此操作将删除数据,", "是否继续?", "提示", {
confirmButtonText: "确定",
confirmButtonText: "取消",
type: "warning",
}).then((res) => {
deleteObject(ids.join(",")).then(() => {
this.$message({ message: "操作成功", type: "success" });
});
this.fetchData();
this.$refs.multipleTable.clearSelection();
}).catch(() => {});
},
closeDialog(flag) {
if (flag) {
this.fetchData(); // 重新刷新表格内容
}
this.showDialog = false;
},
},
};
</script>
<style scope lang="scss">
.tools {
margin: 5px 0 60px;
padding-right: 30px;
.search {
width: 15%;
float: left;
}
& .button {
float: right;
margin-right: 10px;
}
}
.el-table{
margin-bottom: 80px;
}
</style>
表单组件formDialog.vue
<template>
<transition name="dialog-fade">
<el-dialog v-if="showDialog" :title="dialogTitle" width="500px"
:visible.sync="showDialog" @close="closeDialog(0)">
<el-form ref="formInfo" :model="formInfo" label-width="100px">
<el-form-item label="专利号：" prop="patent_sn">
<el-input v-model="formInfo.patent_sn"></el-input>
</el-form-item>
<el-form-item label="专利名称：" prop="patent_name">
<el-input v-model="formInfo.patent_name"></el-input>
</el-form-item>
<el-form-item label="申请人：" prop="patent_person">
<el-input v-model="formInfo.patent_person"></el-input>
</el-form-item>
<el-form-item label="申请日：" prop="apply_date">
<el-date-picker type="date" placeholder="选择日期"
v-model="formInfo.apply_date" format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item style="text-align: right">
<el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
<el-button @click="closeDialog(0)">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</transition>
</template>
<script>
import { createObject,updateObject } from "@/api/patent/patent.js";
export default {
name: "formDialog",
props: {
dialogTitle: {
type: String,
default: "添加人员",
},
itemInfo: {
type: Object,
default: function () {
return {};
},
},
editId: {
type: Number,
default: null,
},
},
data() {
return {
showDialog: false,
formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
};
},
methods: {
submitForm(formName) {
const that = this;
const params = Object.assign(that.formInfo, {});
that.$refs[formName].validate((valid) => {
if (valid) {
if (this.dialogTitle == "添加人员") {
createObject(params).then((response) => {
that.$message({
message: "操作成功！",
type: "success",
});
that.closeDialog(1);
}).catch(() => {});
}
if (this.dialogTitle == "编辑人员") {
updateObject(this.editId, params).then((response) => {
that.$message({
message: "操作成功！",
type: "success",
});
that.closeDialog(1);
}).catch(() => {});
}
}
});
},
closeDialog(flag) {
this.$refs["formInfo"].resetFields();
this.showDialog = false;
this.$emit("closeDialog", flag);
},
},
};
</script>
超出文字提示 textOverTooltip.vue
<template>
<div class="text-over-tooltip-components">
<el-tooltip :effect="effect" :disabled="isTooltip" :content="content" :placement="placement">
<div class="ellipsis" @mouseover="onMouseOver(refName)">
<span :ref="refName">{{ content }}</span>
</div>
</el-tooltip>
</div>
</template>
<script>
export default {
name: "textOverTooltip",
props: {
content: String, // 显示的文字内容
refName: String, // 子元素标识（如在同一页面中调用多次组件，此参数不可重复）
effect: { // 默认提供的主题 dark/light
type: String,
default: () => {
return "dark";
},
},
placement: { // Tooltip 的出现位置
type: String,
default: () => {
return "top";
},
},
},
data() {
return {
isTooltip: true, // 是否需要禁止提示
};
},
methods: {
// 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
onMouseOver(str) {
let parentWidth = this.$refs[str].parentNode.offsetWidth;
let contentWidth = this.$refs[str].offsetWidth;
this.isTooltip = contentWidth <= parentWidth; // 判断是否禁用tooltip功能
},
},
};
</script>
<style lang="scss" scoped>
.text-over-tooltip-components {
.ellipsis { /* 文字超出宽度显示省略号 单行 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>
参考的网上代码
父组件
<template>
<div class="dialog-demo">
<el-divider content-position="left">弹框组件v-if的应用demo</el-divider>
<p class="instructions">
el-dialog弹框的visible.sync设置显示和隐藏往往带来很多额外的工作：处理数据的变更，带校验表单的内容移除和校验清除等
</p>
<p class="instructions">
需要我们在各种隐藏的bug里耗费很多精力，处理难度会随着表单内容复杂程度的增加不断提高。（实际业务场景中经常出现非常复杂的表单页面）
</p>
<p class="instructions">
使用v-if既保证数据干净每次都是新弹框，又保留弹框弹出效果让整个调用逻辑非常简单
</p>
<div>
<ul class="desc-list">
<li>不用担心不同数据调用弹框造成的数据污染和页面bug</li>
<li>保留了Element提供的el-dialog弹框弹出特效</li>
<li>模拟了完整的操作流程</li>
</ul>
</div>
<el-button type="primary" @click="addItem">添加一项</el-button>
<el-table
v-loading="tableLoading"
:data="tableData"
style="width: 80%; margin-top: 20px;"
>
<el-table-column prop="date" label="日期"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="province" label="省份"> </el-table-column>
<el-table-column prop="city" label="市区"> </el-table-column>
<el-table-column prop="address" label="地址" width="300">
</el-table-column>
<el-table-column prop="zip" label="邮编"> </el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click.native.prevent="editRow(scope.row)"
>
编辑
</el-button>
</template>
</el-table-column>
</el-table>
<!--弹框组件开始-----------------------start-->
<dialog-component
v-if="showDialog"
ref="dialogComponent"
:dialog-title="dialogTitle"
:item-info="tableItem"
@closeDialog="closeDialog"
></dialog-component>
<!--弹框组件开始-----------------------end-->
</div>
</template>
<script>
import DialogComponent from "./component/dialogComponent";
import { fetchList, deleteObject } from "@/api/patent/patent.js";
export default {
name: "DialogDemo",
components: { DialogComponent },
data() {
return {
tableLoading: false,
showDialog: false,
dialogTitle: "添加人员",
tableData: [],
tableItem: {
id: "",
date: "",
name: "",
province: "",
city: "",
address: "",
zip: "",
},
};
},
mounted() {
this.fetchData();
},
methods: {
// 获取表格数据
fetchData() {
const that = this;
that.tableLoading = true;
that.tableData = [
{
id: 0,
date: "2016-05-03",
name: "张三",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
},
{
id: 1,
date: "2016-05-02",
name: "李四",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333,
},
];
setTimeout(() => {
that.tableLoading = false;
}, 1500);
},
// 添加操作
addItem() {
this.tableItem = {
id: "",
date: "",
name: "",
province: "",
city: "",
address: "",
zip: "",
};
this.dialogTitle = "添加人员";
this.showDialog = true;
this.$nextTick(() => {
this.$refs["dialogComponent"].showDialog = true;
});
},
// 编辑操作
editRow(row) {
this.tableItem = row;
this.dialogTitle = "编辑人员";
this.showDialog = true;
this.$nextTick(() => {
this.$refs["dialogComponent"].showDialog = true;
});
},
// 关闭操作
closeDialog(flag) {
if (flag) {
// 重新刷新表格内容
this.fetchData();
}
this.showDialog = false;
},
},
};
</script>
<style scoped lang="scss">
.dialog-demo {
padding: 20px;
.instructions {
font-size: 14px;
padding: 10px 0;
color: #304455;
}
.desc-list {
padding: 10px 0 30px 40px;
line-height: 30px;
font-size: 14px;
color: #606266;
list-style-type: disc;
}
}
</style>
子组件：
<template>
<transition name="dialog-fade">
<el-dialog
v-if="showDialog"
:title="dialogTitle"
class="dialog-component"
:visible.sync="showDialog"
width="500px"
@close="closeDialog(0)"
>
<el-form
ref="formInfo"
:model="formInfo"
class="demo-form-inline"
label-width="80px"
>
<el-form-item label="日期：" prop="date" required>
<el-input v-model="formInfo.date"></el-input>
</el-form-item>
<el-form-item label="姓名：" prop="name" required>
<el-input v-model="formInfo.name"></el-input>
</el-form-item>
<el-form-item label="省份：" prop="province" required>
<el-input v-model="formInfo.province"></el-input>
</el-form-item>
<el-form-item label="市区：" prop="city" required>
<el-input v-model="formInfo.city"></el-input>
</el-form-item>
<el-form-item label="地址：" prop="address" required>
<el-input v-model="formInfo.address"></el-input>
</el-form-item>
<el-form-item label="邮编：" prop="zip" required>
<el-input v-model="formInfo.zip"></el-input>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button type="primary" @click="submitForm('formInfo')"
>确定</el-button
>
<el-button @click="closeDialog(0)">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</transition>
</template>
<script>
export default {
name: "DialogComponent",
props: {
dialogTitle: {
type: String,
default: "添加人员",
},
itemInfo: {
type: Object,
default: function () {
return {};
},
},
},
data() {
return {
showDialog: false,
formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
};
},
methods: {
// 保存操作
submitForm(formName) {
const that = this;
const params = Object.assign(that.formInfo, {});
that.$refs[formName].validate((valid) => {
if (valid) {
// 走保存请求
that.$message({
message: "操作成功！",
type: "success",
});
that.closeDialog(1);
} else {
return false;
}
});
},
// 关闭弹框
closeDialog(flag) {
this.$refs["formInfo"].resetFields();
this.showDialog = false;
this.$emit("closeDialog", flag);
},
},
};
</script>
<style scoped lang="scss">
.dialog-fade-enter-active {
-webkit-animation: dialog-fade-in 0.3s;
animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
-webkit-animation: dialog-fade-out 0.3s;
animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-in {
0% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-webkit-keyframes dialog-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
@keyframes dialog-fade-out {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
opacity: 0;
}
}
</style>
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
