VueJS开发常见问题

一、el-submenu无法添加click事件#

　　1、ElementUI组件库中的导航栏示例

 			<el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>导航一</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="1-1">选项1</el-menu-item>
                <el-menu-item index="1-2">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                <el-menu-item index="1-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="1-4">
                <template slot="title">选项4</template>
                <el-menu-item index="1-4-1">选项1</el-menu-item>
              </el-submenu>
            </el-submenu>

　　2、在el-submenu 中添加click是无效的并不会触发，需要单独添加个div进行划分，如下：

		<template slot="title">             
             <div @click="one">
               <i class="el-icon-location"></i>
               <span>导航一</span>
             </div>
        </template>
<!--
	在<div>中添加监听事件，实现点击触发 【@click="one"】one 是调用的函数
-->
<!--原内容
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
         </template>
-->

二、el-input无法输入

　　1、在层级太多时，就会出现输入框无法输入的问题，解决办法是强制更新，组件部分代码如下：

			<el-dialog title="添加用户" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input @input="forceUpdate" placeholder="请输入内容" v-model="form.username" autocomplete="off"></el-input>
                  </el-form-item>
              </el-dialog>
<!--
	@input用于实时检测数据的变化
-->

　　2、调用的函数如下：

			 forceUpdate() {
			      this.$forceUpdate();
			    },
	<!--
		this.$forceUpdate()用于强制更新数据与视图
	-->

三、el-switch在表格中单行控制

　　1、在表格中el-switch不设置时，操作一个就操作一列，实现单独控制需要绑定每一行的唯一标识，这里用行号如下：

				<!--用户身份列-->
              <el-table-column  label="用户身份" prop="ID" width="180">
                <!--开关标签-->
               <template slot-scope="scope">
                <el-switch v-if="user_table_show" @change="SwitchChange(scope.$index)" v-model="scope.row.ID"  :active-value=1 :inactive-value=0 active-text="管理员" inactive-text="普通用户">
                </el-switch>
                </template>
                </el-table-column>
<!--
	slot-scope="scope" // 可以理解为获取表格的信息，如下：
	v-model="scope.row.ID"  :active-value=1 :inactive-value=0  // 获取的为表格行中ID的信息，与每行数据的ID进行绑定，通过开关改变ID的值为1或0
	@change="SwitchChange(scope.$index)" // 触发事件设置，传输的参数scope.$index是行号，通过将行号与数据库内的数据标号进行转换，就可以实现对数据库数据的操作  【这部分实现了switch的单行控制】
	-->

　　2、示例图

四、单选按钮的单行控制

　　1、表格中的单选按钮如下：

　　2、在添加完后点击一个按钮整列的状态将会一起改变，单行改变的代码如下：

			<template slot-scope="scope">
                 <el-radio @change="AssignRadio(scope.$index)" v-model="radio" :label="scope.row.Phonenumber">分配</el-radio>
            </template>
<!--
 slot-scope="scope"  //获取表格中数据
 @change="AssignRadio(scope.$index)"  //scope.$index是当前行号，AssignRadio（）是触发的函数
  v-model="radio" :label="scope.row.Phonenumber"  //这部分是实现但行控制的，与每一行的唯一标识绑定，这样label名称与radio变量的值会同步
-->

五、页面布局显示

　　1、使用el-card时，经常遇见图标的上下边距与左右距离不合适，这里提供一种解决方案，使用el-col、el-row

		<el-row v-if="user_table_show">  <!--el-row 控制行-->
              <el-col :span="9">   <!--el-col控制列，：span=""为控制列的宽度-->
                <!--输入搜索部分-->
                  <div style="margin-top: 15px;">
                    <el-input placeholder="请输入内容" v-model="SearchInput" class="input-with-select">
                      <el-select v-model="select" slot="prepend" placeholder="请选择">
                        <el-option label="用户名" value="1"></el-option>
                        <el-option label="邮箱" value="2"></el-option>
                        <el-option label="用户身份" value="3"></el-option>
                      </el-select>
                      <el-button @click="SearchUserList()" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                  </div>
              </el-col>
              <!--添加用户部分-->
              <el-col :span="3">
                <el-button type="info" @click="AddUser()" style="margin-top: 15px; ">添加用户</el-button>
              </el-col>

　　2、显示结果如下：

六、页面切换布局混乱

　　1、问题预览如下：



　　2、可以看出，用户信息管理模块的页面布局出现在了人员信息管理模块，解决方法是页面刷新，通过转发新的页面，再切换回到当前页面解决以上问题，代码如下：

<!--页面更新函数，在不同的模块功能切换时调用此函数实现页面刷新-->
PageUpdate(){
        if(this.change){
        this.$router.replace({
          path:'./blank.vue',
          name:'blank'
        })
        }
    },
<!--
	 path:'./blank.vue' //要转发的页面路径
	 name:'blank'   //要转发的页面名称
-->

<!--blank页面的具体代码-->
<template>
</template>
<!--此页面用于页面刷新，防止出现页面图标混乱情况-->
<script>
export default {
      
      
     data(){
      
      
          this.$router.replace({
      
      
               path:'./home.vue',
               name:'home'
          })
          return{
      
      
               
          }
     }
}
</script>

<style lang="less" scoped>
</style>

<!--
	 path:'./home.vue' //要转发的页面路径
	 name:'home'   //要转发的页面名称
-->
<!--整个过程从home页面切换到blank页面，然后再从blank页面切换回home页面实现页面的刷新-->

　　 3、涉及到参数的跨页面传参与页面更新

    //刷新页面，否则会出现标签混乱问题
    PageUpdate(){
    
    
        if(this.change){
    
    
        this.$router.push({
    
     path: "/user_blank" ,query:{
    
    useremail:this.receive} }); 
        /*将必要的参数传到user_blank页面，然后，再从user_blank页面将参数传回，达到更新页面的目的*/
        }
    },
    //query是用来传输参数的，{A:B} 其中A为参数名，B为具体的参数值

<!--user_blank页面代码如下：-->
<template>

</template>
<!--此页面用于页面刷新，防止出现页面图标混乱情况-->
<script>
export default {
      
      
     data(){
      
      
          
          /*接收来自user_home的参数，然后再将参数与页面返回到user_home实现页面更新*/
         this.$router.push({
      
       path: "/user_home" ,query:{
      
      useremail:this.$route.query.useremail} }); 
          return{
      
      
            
          }        
          
     },
}
</script>

<style lang="less" scoped>
</style>