Vue.js 学习13 ElementUI项目中使用自定义组件
Posted 编程圈子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 学习13 ElementUI项目中使用自定义组件相关的知识,希望对你有一定的参考价值。
Vue.js 学习13 ElementUI项目中使用自定义组件
一、准备工作
- 一个现成的ElementUI项目
本文目标:建立一个自定义的Dialog组件。
项目有person列表页面,要在列表页面点击按钮查看用户信息。
二、实现过程
1. 新建自定义组件的文件夹及文件
在src/views/person下
新建的index.vue代码大致如下:
<template>
</template>
<script>
export default
data()
return
,
methods:
</script>
<style scoped>
</style>
2. 添加dialog代码
<template>
<!-- 查看会员信息对话框 -->
<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="closeDialog" width="1000px" append-to-body>
<el-row>
<el-col>昵称: form.nickName</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">关 闭</el-button>
</div>
</el-dialog>
</template>
<script>
import getPerson from "@/api/person";
export default
// 传入参数
props:
"dialogShow":type:Boolean,
"title":type:String,
"personId":type:Number
,
data()
return
dialogFormVisible: this.dialogShow,
form:
,
mounted()
getPerson(this.personId).then(ret=>
this.form = ret.data;
);
,
methods:
closeDialog()
// 向外部传递变量
this.$emit('dialogShowChange', false)
,
// 取消按钮
cancel()
this.personDialogVisible = false;
</script>
<style scoped>
</style>
3. 调用方代码
<template>
<div class="app-container">
<el-table :data="personList" >
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号" width="50" align="center" prop="id" />
<el-table-column label="用户名" align="center" prop="userName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleView(scope.row)"
>查看</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="dialogShow" class="dialogBox">
<ViewPersonDialog :title="title" :dialogShow="dialogShow" :personId="personId" @dialogShowChange="dialogShowChange"></ViewPersonDialog>
</div>
</div>
</template>
<script>
import listPerson from '@/api/person'
import viewPersonDialog from '@/views/person/viewPersonDialog'
export default
name: "Person",
components:
//引入组件
viewPersonDialog
,
data()
return
// 会员信息表格数据
personList: [],
// 要查看的用户
personId:null,
// 弹出层标题
title: "查看用户",
// 是否显示弹出层
personDialogVisible: false,
dialogShow: false
;
,
created()
// 加载列表
this.getPersonList();
,
methods:
/** 查询会员信息列表 */
getPersonList()
listPerson().then(response =>
this.personList = response.rows;
);
,
/** 查看按钮操作 */
handleView(row)
this.reset();
this.personId = row.id || this.ids;
this.dialogShow=true;
,
// 组件传出的事件
dialogShowChange(val)
console.log("val", val);
this.dialogShow = val
;
</script>
以上是关于Vue.js 学习13 ElementUI项目中使用自定义组件的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Vue js 中使 localStorage 中的数据具有反应性