ElementUI之首页导航&左侧菜单

1.导航菜单

1.1.后台数据接口定义

ModuleMapper.xml部分代码实现如下：

<resultMap id="BaseResultMap" type="com.zking.ssm.model.Module" >
      <id column="id" jdbcType="INTEGER" property="id" />
      <result column="pid" jdbcType="INTEGER" property="pid" />
      <result column="text" jdbcType="VARCHAR" property="text" />
      <result column="icon" jdbcType="VARCHAR" property="icon" />
      <result column="url" jdbcType="VARCHAR" property="url" />
      <result column="sort" jdbcType="INTEGER" property="sort" />
      <collection property="modules" ofType="com.zking.ssm.model.Module"
                  column="id" select="queryChildNodeByPid"/>
</resultMap>
<sql id="Base_Column_List" >
    id, pid, text, icon, url, sort
</sql>
<!--先根据id查询菜单根级目录，再利用上次查询结果collection中column的值id作为递归查询条件，查出所有子菜单，返回结果必须为resultMap，并且值为上面构建的resultMap的id值-->
<select id="queryChildNodeByPid" resultMap="BaseResultMap" parameterType="int">
    select <include refid="Base_Column_List"/> from t_module_vue
    where pid=#{value}
</select>

1.2.前端导航菜单绑定

导航菜单样式

<el-menu router :default-active="$route.path" default-active="2" class="el-menu-vertical-demo"
background-color="#334157" text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed"
>
    <div class="logobox">
        <img class="logoimg" src="../assets/img/logo.png" alt="">
            </div>

<el-submenu  v-for = "m in menus"
:index="'index_'+m.id" :key="'key_'+m.id">
    <template slot="title">
        <i :class="m.icon"></i>
<span>{{m.text}}</span>
</template>
<el-menu-item v-for="m2 in m.modules"
:index="m2.url" :key="'key_'+m2.id">
    <i :class="m2.icon"></i>
<span>{{m2.text}}</span>
</el-menu-item>
</el-submenu>
</el-menu>

事件定义

<script>
  export default {

    data() {
      return {
        collapsed: false,
        menus: []
      }
    },
    created() {
      this.$root.BUS.$on('doCollapsed', v => {
        this.collapsed = v;
      });

      // 往后台发送axios请求，获取菜单数据
      let url = this.axios.urls.SYSTEM_MENU;
      this.axios.get(url,{}).then(resp=>{
        alert(url);
        console.log(resp);
        this.menus = resp.data.rows;
      }).catch(err=>{

      });
    }
  }
</script>

效果展示

2.数据表格

搜索栏定义

    <el-table :data="tableData" stripe style="width: 100%;">
      <el-table-column prop="id" label="书籍编号" width="180%">

      </el-table-column>
      <el-table-column prop="name" label="书籍名称" width="180%">

      </el-table-column>
      <el-table-column prop="price" label="价格" width="180%">

      </el-table-column>
      <el-table-column prop="booktype" label="书籍类别" width="180%">

      </el-table-column>
    </el-table>

查询事件定义

query(params){
    // 通用查询方法
    let url = this.axios.urls.BOOK_LIST;
    this.axios.get(url,{params: params}).then(resp=>{
        console.log(resp);
        this.tableData = resp.data.rows;
        this.total = resp.data.total;
    }).catch(error=>{

    })
}

效果展示

3.分页查询

样式

  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="page"
    :page-sizes="[10,20,30,40]"
    :page-size="rows"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
    </el-pagination>

查询事件定义

query(params){
    // 通用查询方法
    let url = this.axios.urls.BOOK_LIST;
    this.axios.get(url,{params: params}).then(resp=>{
        console.log(resp);
        this.tableData = resp.data.rows;
        this.total = resp.data.total;
    }).catch(error=>{

    })
},
    onSubmit(){
        // 搜索方法
        let params = {
            bookname: this.bookname
        }
        this.query(params);
    },
        handleSizeChange(r){
            console.log('当前展示的记录数为' + r + '条');
            let params = {
                bookname: this.bookname,
                page: this.page,
                rows: r
            }
            this.query(params);
        },
            handleCurrentChange(p){
                console.log('当前为第'+ p + '页');
                let params = {
                    bookname: this.bookname,
                    page: p,
                    rows: this.rows
                }
                this.query(params);
            }

效果展示