本网页使用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" %>
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 Demoa> ——————————————
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>
母版页与子页面的问题
该回答引用GPTᴼᴾᴱᴺᴬᴵ
根据您的描述，可能有以下几种可能导致您遇到的问题：
1.双向绑定语法错误：请确保您正确地使用了Vue.js的双向绑定语法。在表格中使用:v-loading='loading'属性应该是正确的，但请确保您已正确地声明和初始化loading变量，并且它是在Vue.js组件实例中定义的，例如：
<template>
<el-table :data="tableData" v-loading="loading">
<!-- 表格列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
loading: true, // 初始化loading变量
tableData: [] // 表格数据
}
},
mounted() {
// 模拟异步加载表格数据
setTimeout(() => {
this.tableData = [
{ name: 'John', age: 28 },
{ name: 'Jane', age: 24 }
]
this.loading = false // 改变loading变量的值
}, 2000)
}
}
</script>
2.兼容性问题：element-ui在不同版本的Vue.js上可能会有不同的兼容性问题。请确保您的Vue.js和element-ui版本是兼容的。例如，element-ui 2.x版本支持Vue.js 2.x版本，而element-ui 3.x版本支持Vue.js 3.x版本。您可以在element-ui的官方文档中查找版本兼容性信息：https://element-plus.org/#/zh-CN/component/changelog
3.表格事件绑定错误：请确保您正确地为表格绑定了事件，并且事件处理函数在Vue.js组件实例中定义。例如，如果您想为表格的多选框绑定一个事件处理函数，可以这样做：
<template>
<el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
loading: true,
tableData: []
}
},
mounted() {
setTimeout(() => {
this.tableData = [
{ name: 'John', age: 28 },
{ name: 'Jane', age: 24 }
]
this.loading = false
}, 2000)
},
methods: {
handleSelectionChange(selection) {
console.log(selection) // 在控制台中输出多选框选中的数据
}
}
}
</script>
如果您仍然无法解决问题，请尝试在控制台中查看是否有任何错误或警告信息。另外，您也可以尝试使用其他调试工具（如Vue.js DevTools）来帮助您诊断问题。
确定 element ui js 引入正确了