vue+elementUI，用到的需要说明的一些功能

1、级联选择器（el-cascader）

先看一下效果吧，这个是选择的效果，支持多选，根节点禁选

这个是回显的效果

接下来说一下怎么实现吧~

//其中platList为数据源,codeList是绑定选中的值，props为配置选项，clearable可清空（选完之后后面带一个删除的按钮）,handleToChange是选中值后触发的，可以在这个方法中绑定值
<el-cascader :options="platList" v-model="codeList" :props="props" clearable @change="handleToChange"></el-cascader>

接下来处理数据，首先需要回显的话，我这边是和后端小哥哥协调了一下，把所有的数据都返回给我了，也就是说返回的是一个树形结构的数据（嘻嘻~）

<script>
export default {
  data () {
    return {
      codeList: [],
      props: {
        multiple: true,
        expandTrigger: 'click', //下一级展开的方式（hover/click）
        value: 'code', //value和label是后端返给数据中你需要绑定的值
        label: 'name'
      },
      platList: [],
    }
  },
  created () {
    this.getPlatList()
  },
  methods: {
    //这里this.$api.GetList是封装了一个axios请求，也可以用axios.get
    getPlatList () {
      this.$api.GetList('请求的接口').then(res => {
        this.platList = res.map(row => {
          row.disabled = true //根节点禁选
        })
      })
    },
    handleToChange (value) {
      console.log(value)
      //这里处理选中的数据，如给后端提交的数据的格式等等
    }
  }
}
</script>

这时候应该可以显示第一个图的效果了，接下来说一下回显的问题,通过请求后端的接口，回来后赋值给codeList，就OK了。

2、时间选择器（el-date-picker）

先看下效果,这个比较简单直接上代码

//直接上代码，这个是一个时间段的选择，value-format是时间的格式，expireTimeOption这个方式我是处理时间的禁用状态
<el-date-picker v-model="sortTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="expireTimeOption"></el-date-picker>

<script>
export default{
  data () {
    return {
      info: {
        pushTime: '',
        endTime: ''
      },
      sortTime: [],//这个时间段的选择是一个数组
      expireTimeOption: {
        disabledDate (date) {
          return date.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  watch: {
    //由于后端的开始日期和结束日期是两个字段，所以这里做了处理
    sortTime (newVal, oldVal) {
      if (newVal !== null) {
        this.info.pushTime = moment(newVal[0]).format('YYYY-MM-DD HH:mm:ss')
        this.info.endTime = moment(newVal[1]).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  }
}
</script>

3、上传图片（el-upload）

//封装的一个组件
<el-upload
      :disabled="isView"
      :list-type="uploadType"
      :action="baseUrl"
      :data="uploadData"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :on-success="handelSuccess"
      :on-preview="viewImage"
      :on-remove="handleRemove">
        <i v-show="uploadType != 'text'" class="el-icon-circle-plus"></i>
        <el-button size="small" type="primary" v-show="uploadType == 'text'">点击上传 
        </el-button>
    </el-upload>
<el-dialog title="图片查看" :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl">
</el-dialog>

<script>
export default {
  props: {
    'fileList': {
      type: Array
    },
    //是否可用
    'isView': {
      default: false
    },
    //上传图片的数量
    'uploadSize': {
      defalut: 1
    },
    // 上传图片的时候需要传给后端的数据
    'uploadData': {},
    // 上传类型-图片picture-card,文件上传为text
    'uploadType': {
      default: 'picture-card'
    }
  },
  data () {
    return {
      baseUrl: '上传图片的接口',
      dialogVisible: false  
    }
  },
  methods: {
    //上传之前的处理
    beforeUpload (file) {
       console.log(file)
      //可以做一些上传图片的处理,（如图片的格式，图片的大小，图片的数量等）
    },
    //成功后的赋值
    handelSuccess (response, file) {
      console.log(response)
    },
    //预览
    viewImage (file) {
      //预览就是一个简单的赋值过程
    },
    //删除
    handleRemove (file) {
      //删除就是从fileList中删除当前的这一项
    }
  }
}
</script>

4、走马灯（el-carousel）

走马灯照着element官网的例子，可以实现，就是一个小问题，如果是两张图片的时候，循环的方向会有点问题，具体可以这样处理(或者其他人有好方法可以分享下)

<div class="banner">
  <el-carousel trigger="click" height="980px" indicator-position="none" @change="changeImage" arrow="never">
   <el-carousel-item v-for="(item,index) in changeBannerList" :key="index">
      <img :src="item.image" alt="banner">      
   </el-carousel-item>
  </el-carousel>
  <ul id="item-carousel" class="el-carousel__indicators el-carousel__indicators--horizontal">
    <li v-for="(item, index) in bannerList" :key="index" :class="[index === indexActive? 'is-active': '','el-carousel__indicator','el-carousel__indicator--horizontal']">
     <button class="el-carousel__button"></button>
    </li>
  </ul>
</div>

<script>
  export default {
    data () {
      return {
        indexActive: 0, // 处理banner循环问题
        bannerList: [], //指示器的循环列表（如果你的走马灯不需要指示器的话可以省略这一步）
        changeBannerList: [] //图片的循环列表
      }
    },
    created () {
      this.getBannerList()
    },
    methods: {
      getBannerList () {
        //原理就是把原来的值拼成4个（如原来是12,循环就是1212,现在需要把数据改成2121这样的形式）
        this.$api.GetList('请求后端的接口').then(res => {
          this.bannerList = JSON.parse(JSON.stringify(res))
          if (res.length === 2) {
            this.changeBannerList = res
            this.changeBannerList.push(res[0])
            this.changeBannerList.unshift(res[1])
          } else {
            this.changeBannerList = res
          }
        })
      },
      changeImage (index) {
        if (this.bannerList.length === 2) {
          index === 2 ? this.indexActive = 0 : index === 3 ? this.indexActive = 1 : this.indexActive = index
        } else {
          this.indexActive = index
        }
      }
    }
  }
</script>

5、时间线（el-timeline）

先看下效果图,这里放一下主要的样式

//timestamp 时间戳（可隐藏）,这个主要是横向的样式
<el-timeline>
  <el-timeline-item v-for="(row,rIndex) in childInfo" :key="rIndex" :timestamp="row.name" placement="top">
    <span class="icon-img"></span>
  </el-timeline-item>
</el-timeline>
<script>
export default {
  data () {
    return {
      childInfo: [{
        name: '2019-03-02' 
      }, {
        name: '2019-02-05'
      }, {
        name: '2019-01-15'
      }]
    }
  }
}
</script>
<style lang="less">
 .el-timeline-item {
    float: left;
    position: relative;
    width: 140px;
    padding-bottom: 20px;
 }
 .el-timeline-item__tail {
    position: absolute;
    left: 4px;
    top: 5px;
    height: 2px;
    width: 100%;
    border-top: 2px solid #E4E7ED;
}
</style>    

6、步骤条（el-steps）

步骤条的这个我这边的案例只要是结合定位做的一个效果，直接上代码

这里重点说一下定位的功能（页面上在每一个需要定位的模块前面加一个标签（<div class="step-jump"></div>）），下面的js处理可以看代码 ,说明一下这里的isFixed是为了处理步骤条的定位问题（刚开始固定，滚到到某一个高度的时候再悬浮）

//direction步骤条的方向（水平、垂直）, active这个是用来设置到哪一步的颜色
<div :class="['location-slide', isFixed ? 'location_fix': '' ]">
  <el-steps direction="vertical" :active="activeStep" finish-status="wait">
  //这里的icon可以用来设置步骤条的图标
    <el-step v-for="(item,index) in list" :key="index" icon="el-icon-web-dian" :title="item.name" @click.native="jump(index)">
    </el-step>
  </el-steps>
</div>

<script>
export default{
  data () {
    return {
      activeStep: 0,
      scrollTop: 0,
      isFixed: false,
      list: [{
        name: '智慧社区解决方案'
      }, {
        name: '方案应用'
      }, {
        name: '方案优势'
      }, {
        name: '实际案例'
      }, {
        name: '让生活更智慧'
      }]
    }
  },
  methods: {
    onScroll () {
      let itemList = document.querySelectorAll('.step-jump')
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop >= 600) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
      for (let i = 0; i < itemList.length; i++) {
        if (this.scrollTop >= itemList[i].offsetTop) {
          this.activeStep = i
        }
      }
    },
    // 滚动定位的方法
    jump (index) {
      this.activeStep = index
      let jump = document.querySelectorAll('.step-jump')
      let total = jump[index].offsetTop + 500 //这里加500是为了调整定位的位置，你们可以自行调整
      let distance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      let step = total / 50
      if (total > distance) {
        smoothDown()
      } else {
        let newTotal = distance - total
        step = newTotal / 50
        smoothUp()
      }
      function smoothDown () {
        if (distance < total) {
          distance += step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothDown, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }

      function smoothUp () {
        if (distance > total) {
          distance -= step
          document.body.scrollTop = distance
          document.documentElement.scrollTop = distance
          setTimeout(smoothUp, 10)
        } else {
          document.body.scrollTop = total
          document.documentElement.scrollTop = total
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.location-slide {
  position: absolute;
  top: 0;
  left: 7%;
  height: 240px;

  .el-timeline-item {
    padding-bottom: 47px;
  }

}

.location_fix {
  position: fixed !important;
  top: 120px !important;
}
</style>