Vue + elementUI使用中总结，包括踩坑（更新中）

el-table表格中实现动态添加输入框

利用vue的新特性，slot-scope来解决

<el-table-column prop="reportName" label="报告名称">
     <template slot-scope="scope">
         <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input>
     </template>
</el-table-column>

Vue中引入插入图片方法

使用require引入图片路径

   <img :src="item.url" class="item-img"/>

export default {
   
   
        name: "SideBar",
        data(){
   
   
          return{
   
   
              itemList: [
                {
   
   name: 'temperature', title: '温、湿度', no: 1, url: require('../../assets/images/wenshidu-icon.png')},    
                ]
          }
        }
}

Vue中引入背景图片方法

使用require引入背景图片路径，跟url拼接起来

    <el-menu-item v-for="(item, index) in itemList" :key="index" :index="item.name" class="menu-item body-bgcolor" :style="{background: item.bgUrl}">

export default {
   
   
        name: "SideBar",
        data(){
   
   
          return{
   
   
              itemList: [
                {
   
   'name': 'temperature', 'title': '温、湿度', 'bgUrl': 'url(' + require('../../assets/images/wenshidu-icon.png') + ')',},             
                ]
          }
        }
}

el-menu设置默认选中项

使用自带的:default-active

<el-menu ref="sidebarMenu" class="menu" router :default-active="navSelected">
	<el-menu-item></<el-menu-item>
</el-menu>

export default {
   
   
        name: "SideBar",
        data(){
   
   
          return{
   
   
              navSelected: 'temperature'
          }
        }
}

el-menu导航上下切换选中项

这个方法自己想的，主要是利用了route的meta属性，给每一项都设置了一个序号

{
   
   
      name: 'functions',
      path: '/functions',
      component: () => import('@/views/module/functions'),
      redirect: '/functions/temperature',
      children: [
        {
   
   
          name: 'temperature',
          path: '/functions/temperature',
          component: () => import('@/views/module/functions/temperature'),
          meta: {
   
   
            title: '温、湿度',
            no: 1
          }
        }]
  }

<template>
  <div class="side-bar">
    <el-row span="24">
      <el-menu ref="sidebarMenu" class="menu" router :default-active="navSelected">
        <i class="up-button" @click="scrollUp"></i>
        <el-menu-item v-for="(item, index) in itemList" :key="index" :index="item.name" :class="{
    
    'menu-item': true, 'body-bgcolor': true, 'active-state': no == item.no}">
          <img :src="item.url" class="item-img"/>
          <span slot="title" :class="item.name" >{
  
  { item.title }}</span>
      </el-menu-item>
        <i class="down-button" @click="scrollDown"></i>
      </el-menu>
    </el-row>
  </div>
</template>

export default {
   
   
        name: "SideBar",
        data(){
   
   
          return{
   
   
              no: 1,
              navSelected: 'temperature',
              itemList: [
                {
   
   name: 'temperature'