本网页使用Webfrom 开发 开发工具 vistual Studio 2022 本地安装 Vue.js 前端框架element ui
js 使用 ajax 请求
在渲染前端时 加载element 表格 时 在表格中加入:v-loading='loading' 属性加载时 使用双向绑定 在settimeout中改变loading 变量值 前端断点调试时
打印loading值已经改变 可是页面并没有效果 而且其他表格的事件都触发不了 现在不清楚是兼容问题还是版本问题，但是在layout 母版页 @click 事件可以触发 但是到了子页面 ResourceData 可以请求接口却触发不了事件 且页面的表格的数据加载好了 却触发不了表格的各种事件(包括多选单击事件等等都触发不了)
<%--父页面母版页--%>
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Layout.master.cs" Inherits="ADO_Web.Layout" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>主页</title>
<%--<meta name="referrer" content="none-when-downgrade">--%>
<link rel="shortcut icon" href="/Frame/Image/app-iPhone@3x.png">
<%-- 这里放置Css 避免冲突 与js分开 --%>
<link rel="stylesheet" type="text/css" href="\Frame\Semantic-UI-master\dist\semantic.css" />
<link rel="stylesheet" href="\Frame\css\index.css">
<script src="\Frame\js\jquery-3.6.1.min.js"></script>
<script src="\Frame\Semantic-UI-master\dist\semantic.js"></script>
<%--渲染责任完成后再执行脚本 注意html页面css文件渲染顺序--%>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="Content" runat="server">
<div id="Home" >
<el-container class="MyIndex" >
<el-header class="MyHead" >
<%-- 头 --%>
<div class="JobTab">
<el-menu default-active="1" active-text-color="blue" class="el-menu-demo" mode="horizontal" @select="SelectMoudle" >
<el-menu-item index="1" >系统主页</el-menu-item>
<el-menu-item index="2">系统记录</el-menu-item>
<el-menu-item index="3" @click.native="GoResourceDataPage">资源中心</el-menu-item>
<el-submenu index="4">
<template slot="title">配置管理</template>
<el-menu-item index="2-1">权限配置</el-menu-item>
<el-menu-item index="2-2">角色配置</el-menu-item>
<el-menu-item index="2-3">属性配置</el-menu-item>
</el-submenu>
</el-menu>
<div class="SearchContent">
<el-input class="MyInputSearch" placeholder="请输入内容" class="input-with-select">
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
</div>
<div class="Headimg">
<div class="ContentLeft">
<%-- 其他内容？？ --%>
<el-link target="_blank" :underline="false" style=" width: 25px;font-size:25px;margin-left:20px;" ><i class="el-icon-headset"></i></el-link>
<el-link target="_blank" :underline="false" style=" width: 25px;font-size:25px;margin-left:20px;" ><i class="el-icon-camera"></i></el-link>
<el-link target="_blank" :underline="false" style=" width: 25px;font-size:25px;margin-left:20px;" ><i class="el-icon-shopping-cart-full"></i></el-link>
<el-link target="_blank" :underline="false" style=" width: 25px;font-size:25px;margin-left:20px;" ><i class="el-icon-star-off"></i></el-link>
</div>
<div class="HeadContent">
<el-link target="_blank" :underline="false" style=" width: 70px;font-size:25px;margin-left:10px;" ><i class="el-icon-bell"></i></el-link>
<el-dropdown style="width:55px;float:left;left:0px;">
<div class="block">
<el-avatar :size="50" :src="CircleUrl" alt="Img" class="IndexImg" style="height:35px;width:35px;">
</el-avatar>
</div>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item icon="el-icon-user" @click.native="GoUserInfoPage">个人主页</el-dropdown-item>
<el-dropdown-item icon="el-icon-setting" >系统设置</el-dropdown-item>
<el-dropdown-item icon="el-icon-switch-button" >退出登录</el-dropdown-item>
<el-dropdown-item icon="el-icon-magic-stick" >查看更多</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<%-- 头 --%>
</el-header>
<%-- 身体 --%>
<el-main class="MyBody">
<asp:ContentPlaceHolder ID="BodyContentPage" runat="server">
</asp:ContentPlaceHolder>
</el-main>
<%-- 身体 --%>
<el-footer class="MyFooter">
<%-- 脚 --%>
<div class="FootText">
<p >
—————————————— Do you Want Codeing Together? Going <a href="https://gitee.com/mr-ouyang-kun/OuYan_Demo/tree/yk/">ichigo Demo</a> ——————————————
</p>
</div>
<%-- 脚 --%>
</el-footer>
</el-container>
</div>
</asp:ContentPlaceHolder>
</body>
</html>
<%-- 等待css 文件加载完成依次加载对应的js --%>
<script type="text/javascript" src="\Frame\js\Vue.js"></script>
<script type="text/javascript" src="\Frame\js\index.js"></script>
<script type="text/javascript" src="\Frame\js\axios.min.js"></script>
<%-- 注意js文件优先级别 --%>
<asp:ContentPlaceHolder ID="ContentScript" runat="server">
</asp:ContentPlaceHolder>
<script type="text/javascript">
//Vue.prototype.ΩappName = 'ichigo app'
var app = new Vue({
el: '#Home',
data: {
Show: true,
CircleUrl: "",
CurrentDate: "",
},
beforeCreate() {
//console.log(this.ΩappName)
},
mounted() {
let that = this;
that.PageLoading();
},
methods: {
PageLoading() {
this.Show = false;
this.GetUserCode();
this.GetUserInfo();
},
GetUserCode() {
//为了避免中文乱码，应该对值进行URL编码(使用时需要URL解码)
$.ajax({
type: "POST",
url: "/Ashx/Home/Home.ashx?action=GetUserCode",
async: false,
data: {},
success: function (data) {
if (data != null) {
localStorage.setItem("U_Code", data.Data);
}
else {
location.href = "http://localhost:62457/Page/ErrorPage/501.html"
}
},
error: function (e) {
location.href = "http://localhost:62457/Page/ErrorPage/404.html"
}
});
},
GetUserInfo() {
let that = this;
$.ajax({
type: "GET",
url: "/Ashx/Home/Home.ashx?action=GetUserInfo",
async: false,
dataType: "json",
success: function (data) {
if (data == null) {
location.href = "http://localhost:62457/Page/LoginPage/Login.aspx"
}
else {
that.CircleUrl = data.Data.UI_Img;
}
},
error: function (e) {
that.$message.warning('个人信息不完整,请前往个人中心补充');
}
});
},
GoUserInfoPage() {
location.href = "http://localhost:62457/Page/UsersInfoPage/UserInfo.aspx"
},
GoResourceDataPage() {
location.href = "http://localhost:62457/Page/ResourceDataPage/ResourceData.aspx"
},
SelectMoudle(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
<style>
.el-menu.el-menu--horizontal {
border-bottom: none;
}
.IndexImg {
background-size: cover;
background-position: center;
align-content: center;
}
.el-avatar > img {
width:100%;
/*object-fit: fill;*/
}
.MyIndex {
display: flex;
width: 100vw;
height: 100vh;
margin: auto;
font-weight: 100;
font-family: "Microsoft YaHei",微软雅黑;
}
.HeadAnima {
margin: auto;
height: 20%;
width: 100%;
}
.BodyAnima {
margin: auto;
height: 20%;
width: 100%;
}
.FooterAnima {
margin: auto;
height: 20%;
width: 100%;
}
.el-menu-demo {
width: 40%;
display: inline-block;
}
.JobTab {
width: 80%;
display: flex;
}
.SearchContent {
display: inline-block;
height: auto;
width: 60%;
}
.MyInputSearch {
padding: 10px;
width: 100%;
}
.block {
padding: 4px;
display: flex;
}
.Headimg {
width: 20%;
display: flex;
}
.HeadContent {
display: flex;
width: 40%;
align-items: center;
}
.ContentLeft {
width: 60%;
display: flex;
align-items: center
}
.MyHead {
height: 20%;
width: 100%;
display: flex;
margin: auto;
border: 1px solid #EEEEEE;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.MyFooter {
height: 20%;
width: 100%;
margin: auto;
display: flex;
border: 1px solid #EEEEEE;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.MyBody {
height: 60%;
width: 100%;
margin: 0px 0px 0px 0px;
display: flex;
border: 1px solid #EEEEEE;
background-color: #f7f7f7;
}
.FootText {
text-align: center;
font-size: 12px;
color: #c1c1c1;
display: flex;
align-items: center;
margin: auto;
font-weight: 100;
font-family: "Microsoft YaHei",微软雅黑;
}
</style>
<%--父页面母版页--%>
<%--子页面--%>
<%@ Page Title="" Language="C#" MasterPageFile="~/Layout.Master" AutoEventWireup="true" CodeBehind="ResourceData.aspx.cs" Inherits="ADO_Web.Page.ResourceDataPage.ResourceData" %>
<asp:Content ContentPlaceHolderID="head" runat="server">
<style>
.ResDataBox {
display: flex;
justify-content: center;
align-content: center;
width: 100%;
height: 100%;
border: 1px solid #eaeaea;
}
.ResTable {
overflow: revert;
}
.Respagination {
display:flex;
}
.RD_Name_Class {
font-size:13px;
font-optical-sizing:auto;
font-palette:dark;
font-weight:400;
}
</style>
</asp:Content>
<asp:Content ContentPlaceHolderID="BodyContentPage" runat="server">
<div id="Resource" class="ResDataBox" >
<el-table :v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" ref="ResTables" border fixed resizable header-align="center" tooltip-effect="dark"
class="ResTable" height="560" style="width: 100%">
<el-table-column type="selection" width="55" align="center"></el-table-column>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column label="资源标题" align="center" width="220" >
<template slot-scope="scope" >
<span class="RD_Name_Class">{{scope.row.RD_Name}}</span>
</template>
</el-table-column>
<el-table-column label="资源地址"width="280"align="center">
<template slot-scope="scope" >
<%-- href="scope.row.RD_Url" :download="scope.row.RD_Url" --%>
<el-link style="font-size:8px" :href="scope.row.RD_Url" show-overflow-tooltip="true">
<i class="el-icon-paperclip"></i>{{scope.row.RD_Url.length>10?scope.row.RD_Url.slice(0,35)+'...':'0'}}
</el-link>
</template>
</el-table-column>
<el-table-column prop="RD_State" label="状态" align="center" width="80">
<template slot-scope="scope">
<el-tag effect="plain" :type="scope.row.RD_State === 0 ? 'success':scope.row.RD_State === -1?'danger': 'warning'" disable-transitions size="small" style="border:0px !important">
{{scope.row.RD_State== 0 ? '可用':scope.row.RD_State== -1?'损坏':'过期'}}
</el-tag>
</template>
</el-table-column>
<el-table-column sortable label="创建时间" align="center" width="250">
<template slot-scope="scope">
<i class="el-icon-time"></i>
{{scope.RD_CreateTime=scope.row.RD_CreateTime.slice(0,10)+' '+scope.row.RD_CreateTime.slice(11,19)}}
</template>
</el-table-column>
<el-table-column sortable label="修改时间" align="center" width="250">
<template slot-scope="scope">
<i class="el-icon-time"></i>
{{scope.RD_UpdateTime=scope.row.RD_UpdateTime.slice(0,10)+' '+scope.row.RD_UpdateTime.slice(11,19)}}
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="220" align="center">
<template slot-scope="scope">
<el-button plain size="small" icon="el-icon-view" circle type="primary"></el-button>
<el-button @click="handleClick(scope.row)" plain size="small" icon="el-icon-edit" circle type="warning"></el-button>
<el-button icon="el-icon-delete" plain circle size="small" type="danger"></el-button>
<el-button icon="el-icon-share" plain circle size="small"></el-button>
</template>
</el-table-column>
</el-table>
</div>
<%-- <el-pagination
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>--%>
</asp:Content>
<asp:Content ContentPlaceHolderID="ContentScript" runat="server">
<script type="text/javascript">
var app=new Vue({
el: "#Resource",
data:{
show: true,
loading: true,
tableData: [{}],
multipleSelection: []
},
mounted() {
setTimeout(() => {
this.loading = false;
console.log(this.loading)
},2000)
this.GetResourceDataList();
},
methods: {
GetResourceDataList() {
let that = this;
//axios.get('/Ashx/ResourceData/ResourceData.ashx', { action:"GetResourceDataList"}).then((d) => {
// console.log("ABCD",d);
//}).catch((err) => {
// console.log(err)
//})
$.ajax({
type: "GET",
url: "/Ashx/ResourceData/ResourceData.ashx?action=GetResourceDataList",
async: false,
dataType: "json",
success: function (data) {
console.log(data);
that.tableData = data.Data;
},
error: function (e) {
that.MsgError("错误消息", "请求资源错误！！")
}
});
},
MsgError(title, val) {
this.$notify.error({
title: title,
message: val
});
},
handleClick(scope, row) {
console.log(scope)
},
handleSelectionChange(val) {
this.multipleSelection = val;
console.log(val)
},
RowClick() {
console.log(1111)
}
}
})
</script>
</asp:Content>
