element Slider 滑块 改动效果

<template>
<div>

<el-row :gutter="10">
  <el-col>
    <el-card class="box-card" :body-style="{background:'#3300cc'}">
      <div slot="header" class="clearfix" >
        <span> 快照趋势图 </span>
        <el-button-group  style="float: right; padding: 3px 0" >
          <el-button type="primary" plain size="mini"> 一周 </el-button>
          <el-button plain size="mini"> 半年 </el-button>
          <el-button plain size="mini"> 一年 </el-button>
        </el-button-group>
      </div>
      <line-chartts height="200px" width="100%" id="snapshot" :data="dashboradData.Computer"></line-chartts>
    </el-card>
  </el-col>
  <el-col >
    <el-card class="box-card">
      <char-map height="400px" width="100%" id="map" :data="dashboradData.map"></char-map>
    </el-card>
  </el-col>
  <el-button @click="handlecc"> 提交 </el-button>
  <el-col>
    <el-input-number v-model="num1" @change="handleChange" :precision="0" :step="1"  :min="0" :max="3000" label="描述文字"></el-input-number>
  </el-col>
</el-row>
<br><br><br><br><br><br>
<el-col :span="4">
  <el-card class="box-card">
    <el-tree 
    :data="data" 
    :props="defaultProps" 
    node-key="id"
    ref="reference"
    :highlight-current="true"
    >
      <span class="custom-tree-node" slot-scope="{node, data}">
        <span>{{node.label}}</span>
        <span v-show="node.level === 1">
          <el-button type="text" size="mini" @click.native.stop="() => append(data)"> <i class="el-icon-plus"></i> </el-button>
          <el-button type="text" size="mini" @click.native.stop="() => remove(node, data)"> <i class="el-icon-delete"></i> </el-button>
        </span>
        <span v-show="node.level === 2">
          <el-button type="text" size="mini" @click.native.stop="() => remove(node, data)"> <i class="el-icon-delete"></i> </el-button>
        </span>
      </span>
    </el-tree>
  </el-card>
</el-col>
<add-tree :add-data="z_addTreeData"></add-tree>
<br><br><br><br><br><br><br><br><br><br><br>
<div style="width:1200px;marginLeft:20px">
  <el-col :span="10">
    <el-slider
    v-model="value6"
    :min='1' :max='10' :step="1" :show-tooltip="false"
    >
    </el-slider>
    <div class="box">
        <span v-for="(item,index) in timeList" :key="index">{{item.text}}</span>
      </div>
  </el-col>
</div>
 <br><br><br><br><br><br><br><br><br><br><br>

</div>
</template>

<script>
import LineChartts from ‘../components/line-charts/LineCharts.vue’
import charMap from ‘../components/charMap/charMap.vue’
import cc from ‘../components/cc.vue’
import addTree from ‘./addAtree.vue’
export default {
data() {

return {
  dashboradData: {
    Computer:{keys: ["2018-11", "2018-12", "2019-01", "2019-02", "2019-03", "2019-04"],
      values: [{data: [10, 30, 80, 20, 90, 10], name: "合计"},{data: [90, 10, 50, 60, 10, 20], name: "合计 0"},{data: [10, 70, 50, 60, 90, 20], name: "合计 3"}]
    },
    map: [
          {
            name: '北京',
            value: [116.46, 39.92]
          },
          {
            name: '大庆',
            value: [125.03, 46.58]
          },
          {
            name: '分店 3',
            value: [120.38, 37.35, 142]
          },
          {
            name: '分店 4',
            value: [122.207216, 29.985295, 123]
          },
          {
            name: '分店 5',
            value: [110.245672, 30.7787677, 566]
          }
        ]
  },
  bb: {
    a: '',
    b: ''
  },
  num1: 0,
  cici: [
    {name: 'cscs'},
    {name: 'cmc'},
    {name: 'cscc'},
    {name: 'cscs1'},
    {name: 'cscs'}
  ],
  data: [{
      label: '一级 1',
      id: 1,
      children: [{
        label: '二级 1-1',
        children: [{label: '三级 1-1-1'}]
      }]
    }, {
      label: '一级 2',
      children: [{
        label: '二级 2-1',
        children: [{label: '三级 2-1-1'}]
      }, {
        label: '二级 2-2',
        children: [{label: '三级 2-2-1'}]
      }]
    }, {
      label: '一级 3',
      children: [{
        label: '二级 3-1',
        children: [{label: '三级 3-1-1'}]
      }, {
        label: '二级 3-2',
        children: [{label: '三级 3-2-1'}]
      }]
    }],
  defaultProps: {
    children: 'children',
    label: 'label'
  },
  z_addTreeData: {data: {},
    dialog: false
  },
  value6: '',
  timeList:[
    {
      type:'MINUTE',
      text:'1 时',
      duration:60
    },
    {
      type:'HOUR',
      text:'4 时',
      duration:4
    },
    {
      type:'HOUR',
      text:'12 时',
      duration:12
    },
    {
      type:'HOUR',
      text:'1 天',
      duration:24
    },
    {
      type:'DAY',
      text:'3 天',
      duration:3
    },
    {
      type:'DAY',
      text:'5 天',
      duration:5
    },
    {
      type:'DAY',
      text:'1 周',
      duration:7
    },
    {
      type:'DAY',
      text:'2 周',
      duration:14
    },
    {
      type:'DAY',
      text:'1 月',
      duration:30
    },
    {
      type:'DAY',
      text:'3 月',
      duration:90
    }
  ]
}

},
components: {

LineChartts,
charMap,
cc,
addTree

},
created () {

this.handlecc();
this.$nextTick(item => {this.$refs.reference.setCurrentKey(1)
})
// 第一种方法 for 循环方法 冒泡排序
// for(let i = 0; i < this.cici.length; i++) {//   for (let k = i+1; k < this.cici.length; k++) {//     if (this.cici[i].name == this.cici[k].name) {
//       this.$notify({
//         title: '警告',
//         message: '名称一样啦',
//         type: 'warning'
//       });
//       console.log(this.cici[i].name)
//       break;
//     }
//   }
// }

},
methods: {

handlecc () {
  setTimeout(item => {
    this.bb = {
      a: true,
      b: 'wanglipin'
    }
  },2000)
},
handleChange (value) {console.log(value);
},
cicis () {let cc = this.cici.every((item,index,element) => {for (let i = index+1; i < element.length; i++) {if (item.name == element[i].name) {
        this.$notify({
          title: '警告',
          message: '名称一样啦',
          type: 'warning'
        });
        return false
      }
    }
  })
},
zhengze () {
  const num = 10;
  let res = /^[1-9]+$/; 
},
handleNodeClick () {console.log('111')
},
append(data) {
  this.z_addTreeData.dialog = true;
  // console.log(data)
  // let ids = 10
  // const newChild = {id: ++ids, label: '儿子', children: [] };
  // if (!data.children) {//   this.$set(data, 'children', []);
  // }
  // data.children.push(newChild);
},

remove(node, data) {
  const parent = node.parent;
  const children = parent.data.children || parent.data;
  const index = children.findIndex(d => d.id === data.id);
  children.splice(index, 1);
},

},
mounted () {

this.cicis();
this.zhengze();

}
}
</script>

<style lang=”less” >
.box-card {
width: 850px;
height: 100%;
background: ‘#132845’;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.box{

margin: -5px 0 30px 0;
position: relative;

}
.box span{

display: inline-block;
width: 55px;
font-size: 10px;

}
.box span:nth-child(1){

margin-left: -8px;

}
.box span:nth-child(10){

display: inline;
position: absolute;
right: -47px;
top:2px;

}
.btn_box{

width: 200px;
margin: 20px auto 0;

}
.slider_box{

padding: 0 6px;

}
</style>