template : 组件的HTML部分
script: 组件的JS脚本 (使用ES6语法编写)
style: 组件的CSS样式
//1.导入组件
import UploadImage from "@/components/UploadImage";
export default {
//2.注册组件
components: { UploadImage } };
接收方：
/*
组件传参
uploadUrl:图片上传路径,
getUrl: 函数
*/
props: ["uploadUrl", "getUrl"],
传递方：
<template> <div> <!-- 使用组件,注意使用短横线连接 ,向父组件传递了两个参数 uploadUrl: 图片上传地址 :get-url:传递了一个函数 --> <upload-image uploadUrl="https://jsonplaceholder.typicode.com/posts/" :get-url="show"> </upload-image> </div> </template>
<template> <div> <div class="block"> <span class="demonstration">完整功能</span> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" ></el-pagination> </div> </div> </template> <script> export default { methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, data() { return { currentPage4: 4 }; } }; </script>
<template> <div class="app-container"> <div class="table-container"> <el-table ref="homeAdvertiseTable" :data="list" style="width: 100%;" border> <el-table-column label="id" width="220" align="center"> <template slot-scope="scope">{{scope.row.id}}</template> </el-table-column> <el-table-column label="广告名称" align="center" width="320"> <template slot-scope="scope">{{scope.row.name}}</template> </el-table-column> <el-table-column label="广告图片" width="420" align="center"> <template slot-scope="scope"> <img style="height: 80px" :src="scope.row.img" /> </template> </el-table-column> </el-table> </div> <div class="pagination-container"> <el-pagination background @size-change="handlePageSizeChange" @current-change="handleCurrentPageChange" layout="total, sizes,prev, pager, next,jumper" :current-page="page" :page-sizes="[5,10, 20]" :page-size="size" :total="total" > </el-pagination> </div> </div> </template>
<script> export default { data() { return { total: 0, //总条数 size: 5, //每页显示条数 page: 1, //当前页 list: [] //广告数据 }; }, created() { this.loadList(); }, methods: { //加载广告数据 loadList() { return this.axios .get("http://localhost:8080/ssm-web/PromotionAd/findAllPromotionAd", { params: { currentPage: this.page, pageSize: this.size } }).then(res => { this.list = res.data.content.list; this.total = res.data.content.total; this.listLoading = false; }).catch(error => { this.$message.error("数据获取失败! ! !"); }); }, //每页显示条数发生变化 handlePageSizeChange(size) { this.size = size; this.loadList(); }, //当前页发生变化 handleCurrentPageChange(page) { this.page = page; this.loadList(); } } }; </script>
active-value: switch:打开时的值
inactive-value : switch 关闭时的值
<!-- 上线与下线 -->
<el-table-column label="上线/下线" width="120" align="center">
<template slot-scope="scope">
<el-switch
@change="handleUpdateStatus(scope.row)"
:active-value="1"
:inactive-value="0"
v-model="scope.row.status">
</el-switch>
</template>
</el-table-column>
//方法4: 修改状态
handleUpdateStatus(row) {
this.$confirm("是否要修改上线/下线状态?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
//请求后台
axios .get("/PromotionAd/updatePromotionAdStatus", {
params: {
id: row.id,
status: row.status
}
}).then(res => {
this.loadPromotionAd();
}).catch(err => {
this.$message("修改状态失败! ! !");
});
});
},
<template> <div> <div class="block"> <span class="demonstration">带快捷选项</span> <el-date-picker v-model="dateTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" ></el-date-picker> <el-button type="primary" @click="getDate">查询</el-button> </div> </div> </template> <script> export default { data() { return { pickerOptions: { shortcuts: [ { text: "最近一周", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", [start, end]); } }, { text: "最近一个月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit("pick", [start, end]); } }, { text: "最近三个月", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit("pick", [start, end]); } } ] }, dateTime: "" }; }, methods: { getDate() { const params = {}; params.startCreateTime = this.dateTime[0]; params.startCreateTime.setHours(0); params.startCreateTime.setMinutes(0); params.startCreateTime.setSeconds(0); params.endCreateTime = this.dateTime[1]; params.endCreateTime.setHours(23); params.endCreateTime.setMinutes(59); params.endCreateTime.setSeconds(59); console.log(params); } } }; </script>
//数据部分 return { pickerOptions,//日期选择器选项设置 total: 0, //总条数 size: 10, //每页显示条数 page: 1, //当前页 filter, users: [], loading: false, allocAdminId: "", allocDialogVisible: false, allocRoleIds: [], allRoleList: [] }; // JS部分 created() { //初始化用户数据 this.loadUsers(); } //方法1: 加载用户数据 loadUsers() { this.loading = true; //设置参数 const params = { currentPage: this.page, pageSize: this.size }; //过滤条件 if (this.filter.username) params.username = this.filter.username; //设置日期参数 if (this.filter.resTime) { params.startCreateTime = this.filter.resTime[0]; params.startCreateTime.setHours(0); params.startCreateTime.setMinutes(0); params.startCreateTime.setSeconds(0); params.endCreateTime = this.filter.resTime[1]; params.endCreateTime.setHours(23); params.endCreateTime.setMinutes(59); params.endCreateTime.setSeconds(59); } //请求后台接口 return axios .post("/user/findAllUserByPage", params) .then(res => { this.users = res.data.content.list; //用户数据 this.total = res.data.content.total; this.loading = false; }) .catch(err => { this.$message("获取数据失败! ! !"); }); },
handleDelete(row) { this.$confirm("是否要删除该角色?", "提示", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(() => { axios("/role/deleteRole?id=" + row.id) .then(res => { this.loadRoles(); }) .catch(err => { this.$message.error("操作失败! ! !"); }); }); },
原文：https://www.cnblogs.com/zhf123/p/14475966.html