Awzh Circulate 2023-03-06 13:57 采纳率: 100%
浏览 41
已结题

vue 加 element ui 事件触发

本网页使用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>


  • 写回答

4条回答 默认 最新

  • Awzh Circulate 2023-03-06 18:25
    关注

    母版页与子页面的问题

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 3月15日
  • 已采纳回答 3月7日
  • 创建了问题 3月6日

悬赏问题

  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应