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>