小知点杂烩

1.表格中某列数据太长

<el-table-column
      prop="mobile"
      :show-overflow-tooltip="true"  //将一列中超出宽度部分省略号表示，鼠标放上会显示全部内容
      label="手机号"
      width="100">
</el-table-column>

2.隐藏显示开关按钮控制效果

<template>
<div>
  <el-switch v-model="value1" active-value=false inactive-value=true active-text=隐藏 inactive-text=显示 style=“height:50px” @change="change">
  </el-switch>
<el-table :data="blogData" style="width: 100% ">

<el-table-column prop="id" label="编号" width="180">
</el-table-column>

<el-table-column prop="name" @change="change" label="姓名" width="180">
</el-table-column>

<el-table-column prop="sex" label="性别" v-if="values">
</el-table-column>

<el-table-column prop="address" label="住址" v-if="valuess">
</el-table-column>
</el-table>
</div>
</template>
<script>
import axios from 'axios'
export default{
name:'show-examples',
data(){
  return{
    blogData:[],
    value1:true,
    values:true,
    valuess:true
  }
},
methods:{
  change(data){
    if(data=="true"){
      this.values=true;
    }
    else{
      this.values=false
      }
    }
  }
}
</script>

右键选择显示或隐藏某列

<template>
<div>
  <el-table :data="list" border fit @header-contextmenu="contextmenu">
   <el-table-column v-if="colData[0].istrue"  label="放射源ID" align="center" />
   <el-table-column v-if="colData[1].istrue"  label="源自编号" align="center" />
   <el-table-column v-if="colData[2].istrue"  label="类型" align="center" />
   <el-table-column v-if="colData[3].istrue"  label="强度" align="center" />
   <el-table-column v-if="colData[4].istrue"  label="还源人" align="center" />
</el-table>
<!--右键弹出的菜单内容-->
<!--动态计算菜单出现的位置-->
<div v-show="menuVisible" :style="{top:top+ &quot;px&quot;,left:left+ &quot;px&quot;}" class="menu1">
     <el-checkbox-group v-model="colOptions">
       	<el-checkbox v-for="item in colSelect" :key="item" :label="item" />
     </el-checkbox-group>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default{
name:'show-examples',
data() {
    return{
     menuVisible: false,    //右键菜单的显示与隐藏
     top: 0,		//右键菜单的位置
     left: 0,
     colOptions: ['放射源ID', '源自编号', '类型', '强度', '还源人'],  //多选框的选择项
     colSelect: ['放射源ID', '源自编号', '类型', '强度', '还源人'],	//多选框已选择的内容，即表格中显示的列
     // istrue属性存放列的状态
     colData: [
     	{ title: '放射源ID', istrue: true },
        { title: '源自编号', istrue: true },
        { title: '类型', istrue: true },
        { title: '强度', istrue: true },
        { title: '还源人', istrue: true }
      ]
	}
},
watch: {
   colOptions(newVal, oldVal) {
     if (newVal) {    //如果有值发生变化，即多选框的已选项变化
       var arr = this.colSelect.filter(i => newVal.indexOf(i) < 0) 	// 未选中
       this.colData.filter(i => {
         if (arr.indexOf(i.title) !== -1) {
           i.istrue = false
         } else {
           i.istrue = true
         }
       })
     }
   }
 },
methods: {
   contextmenu(row, event) {
     //先把菜单关闭，目的是第二次或者第n次右键鼠标的时候 它默认的是true
     this.menuVisible = false  
     // 显示菜单
     this.menuVisible = true    
     window.event.returnValue = false   //阻止浏览器自带的右键菜单弹出
     //给整个document绑定click监听事件， 左键单击任何位置执行foo方法
     document.addEventListener('click', this.foo) 
     //event对应的是鼠标事件，找到鼠标点击位置的坐标，给菜单定位
     this.top = event.clientY
     this.left = event.clientX
   },
   foo() {
     this.menuVisible = false //关闭菜单栏
     document.removeEventListener('click', this.foo)   //解绑click监听
   }
 }
}
</script>
<style scoped>
.menu1{
  position:fixed;
  height:auto;
  width:231px;
  border-radius: 3px;
  border: 1px solid #999999;
  background-color: #f4f4f4;
  padding: 10px;
   z-index: 1000
}
.el-checkbox{
  display:block;
  height:20px;
  line-height:20px;
  padding:0 5px;
  margin-right:0;
  font-size:12px;
  border: 1px solid transparent;
}
.el-checkbox:hover{
  border-radius: 3px;
  border: 1px solid #999999;
}
</style>

select 下拉框同时选择id与label

<el-select v-model="consultant" @change="get" placeholder="请选择" style="width:190px">
    <el-option
      v-for="(item,index) in consultants"
      :key="index"
      :label="item.nickname"
      :value="item.id">
    </el-option>
</el-select>

get(vid){
          let obj ={}
          obj = this.consultants.find(item=>{
          return item.id === vid
        })
        console.log(obj)
        console.log(obj.nickname)
        that.consultant = obj.id   //取的id
        that.consultant_name = obj.nickname  //同时取的姓名
       },

导出与分页组件的使用

  <el-button type="primary" @click="exportExcel" >
  导出数据
  </el-button>
<el-table
    id="out-table"
    v-loading="loading"
    element-loading-text="拼命加载中..."
    :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)" @selection-						change="handleSelectionChange"
    :header-cell-style="{color:'black',fontFamily:'MicrosoftYaHeiUI',fontSize:'14px',fontWeight:900,'text-align':'center'}"
    :cell-style="{'text-align':'center'}"
    border>
    <el-table-column
      type="index"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
  </el-table>
  <el-pagination background
    style="position:fixed;bottom:20px"
    layout="prev, pager, next, sizes, total, jumper"
	:page-sizes="[5, 10, 15, 20]"
	:page-size="pagesize"
	:total="tableData.length"
	@current-change="handleCurrentChange"
	@size-change="handleSizeChange">
    </el-pagination>
</div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx"; 
export default {
  data(){
    return{
      tableData: [],
      pagesize: 10,
      currpage: 1,
      data:[],
      array:'',
    }
  },
  methods:{
    handleCurrentChange(cpage) {
      this.currpage = cpage;
		},
		handleSizeChange(psize) {
			this.pagesize = psize;
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    //导出列表数据
    exportExcel() {
        /* 从表生成工作簿对象 */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
        })
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            '导出表的名字name.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined')
             console.log(e, wbout)
        }
        return wbout
        }

取对象数组中的某一相同属性相邻的值相减

<template>
<div>
<el-timeline>
    <el-timeline-item :timestamp="dateFormat('YYYY-mm-dd HH:MM:SS',created_time)" v-for="item in lists" v-bind:key="item.id" placement="top">
      <el-card>
        <h4>{{item.name}}</h4>
        <span class="ways">方式：{{item.way}}</span>
        <span class="longs">时长：{{item.long}}</span><span>分钟</span>
        <h4>日期：{{item.date}}</h4>
        <!-- <h4>相差时长：{{item.num}}</h4> -->
        <h4>相差天数：{{item.time}}</h4>
        <el-tag type="success">{{item.tag}}</el-tag>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</div>
</template>

<script>
import { number } from 'echarts/lib/export'
import { array } from 'jszip/lib/support'

  export default {
    data() {
      return {
        //   aData.setDate(aData.getDate() + that.validity);
          lists:[
              {'name':'张三','way':'234','long':'3','date':new Date(),'tag':'567'},
              {'name':'李四','way':'234','long':'5','date':new Date(),'tag':'567'},
              {'name':'王五','way':'234','long':'6','date':new Date(),'tag':'567'},
              {'name':'马六','way':'234','long':'9','date':new Date(),'tag':'567'},
              {'name':'妖气','way':'234','long':'14','date':new Date(),'tag':'567'}
            ],
          name:'',
          way:'',
          long:'',
          date:'',
          time:'',
          tag:'',
          created_time:new Date(),
          cha:[],
          num:'',
          value1:'',
          rq:[],
    }
    },
    mounted() {
      this.getlist()
    },
    methods:{
        getchange(){
            console.log(this.value1)
        },
        getlist(){
            var that = this
            console.log(that.lists)
            // var namelist = []
            // var numberlist = []
            // //每个long的值numberlist
            // that.lists.forEach(function(v){ numberlist.push(v.long)});
            // console.log(numberlist)
            // //数组中的每个名字namelist
            // for(let i of that.lists){
            //     console.log(i.name)
            //     namelist.push(i.name)
            // }
            // console.log(namelist)
            // //取每两个相邻值的差组成的数组
            // var cha = []
            // for(var j = 1;j<numberlist.length;j++){
            //     cha.push(numberlist[j]-numberlist[j-1])
            // }
            // that.cha = cha
            // console.log(that.cha)
            // //将两个相邻的值push到原来数组中的对象中
            // var array = []
            // for(var m in that.lists){
            //     that.lists.map((item,m)=>{
            //     array.push(
            //         Object.assign(item,{num:cha[m-1]})
            //     )
            // })
            // }
            // //输出处理后的数组
            // console.log(that.lists)
            //时间处理取出每一个
            var datelist = []
             that.lists.forEach(function(v){ datelist.push(v.date)});
             console.log(datelist)
              //取每两个相邻值的日期差组成的数组
            var rq = []
            for(var q = 1;q<datelist.length;q++){
                var runTime = parseInt((datelist[q].getTime() - datelist[q-1].getTime()) / 1000)
                var day = Math.floor(runTime / 86400);
                rq.push(day)
            }
            that.rq = rq
            console.log(that.rq)
            //将两个相邻的日期差值push到原来数组中的对象中
            var datearray = []
            for(var m in that.lists){
                that.lists.map((item,m)=>{
                datearray.push(
                    Object.assign(item,{time:rq[m-1]})
                )
            })
            }
            //输出处理后的数组
            console.log(that.lists)
        },
    dateFormat(fmt, date) {
      let ret="";
      date=new Date(date);
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (let k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(
            ret[1],
            ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
          )
        }
      }
      return fmt
    }
    }
    }
</script>