前端日常总结

一、VUE项目中element-ui table实现自动滚动效果

注意： 给table表格设置一个高度，并绑定ref方便后面操作真实DOM;

HTML 代码：

<template>
	<div id="app">
		<el-table :data="tableData" height="300" border style="width: 70vw" ref="table">
			<el-table-column prop="date" label="日期" width="180"></el-table-column>
			<el-table-column prop="name" label="姓名" width="180"></el-table-column>
			<el-table-column prop="phone" label="电话" width="180"></el-table-column>
			<el-table-column prop="address" label="地址"></el-table-column>
		</el-table>
	</div>
</template>

data定义：

 data() {
  return {
    tableData: [
       {
         date: '2016-05-03',
         name: '王小虎',
         phone: '123456789',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-02',
         name: '王小虎',
         phone: '123456789',
         address: '上海市普陀区金沙江路 1518 弄'
       }, {
         date: '2016-05-04',
         name: '王小虎',
         phone: '123456789',
         address: '上海市普陀区金沙江路 1518 弄'
       }
    ]
  }
}

mounted方法：

mounted() {               
	const table = this.$refs.table// 拿到表格挂载后的真实DOM
	const divData = table.bodyWrapper// 拿到表格中承载数据的div元素
// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
  setInterval(() => {
    divData.scrollTop += 1// 元素自增距离顶部1像素
    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
      divData.scrollTop = 0// 重置table距离顶部距离
    }
  }, 100)
}

css隐藏滚动条：

/* 滚动条整体部分 */
    ::-webkit-scrollbar {
        width: 0;
    }

    /*滚动条轨道、滚动条*/
    ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-thumb {
        border-radius: 50px;
        border: 5px solid transparent;
    }

二、Object(对象)转成 数组对象

定义一个对象 和 一个空数组（用来接收转换后的数据）

let obj = {xd: "熊大",02: "熊二",03: "香香",04: "松鼠"}
let list  =[]

1. map方法

transformList() {
    // id 如果前面是数字 就会按照索引值数字来，如果不是就保持原样
    let key = Object.keys(this.obj) //取出当前对象的索引

    let values=Object.values(this.obj) //取出当前对象的值
    
    //将拿到的索引 跟 值 组到一起，返回数组对象
    let arrObj=key.map((item,index)=>{
        return{
            name:values[index],//values是一个数组，加index是为了拿到跟索引同个位置的值
            id:item
        }
    })
    this.list = arrObj
    console.log(this.list,"对象转成 数组对象");
},

2. for循环

for (let X in obj ) {
       this.list.push({ name: X, value: obj [X]})
    }
    this.list = list

获取当前时间信息（实时更新）

 <span>{{ time_now }}</span> |
 <span>{{ date_now }}</span> |
  <span>{{ week_now }}</span>

//data数据
 time_now: null,
 date_now: null,
 week_now: null,

// 获取当前时间信息
        getNowData() {
            let date = new Date()
            // 获取时间：时分秒
            const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
            const minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
            const secound = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
            this.time_now = hour + ':' + minute + ':' + secound
            // 获取日期：年月日
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()
            this.date_now = year + "-" + month + "-" + day
            // 获取星期几
            const weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            this.week_now = weeks[new Date().getDay()];
            //定时器
            setInterval(() => {
                date = new Date()
                const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
                const minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
                const secound = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
                this.time_now = hour + ':' + minute + ':' + secound
            }, 1000);
            setInterval(() => {
                date = new Date()
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                this.date_now = year + "-" + month + "-" + day
                const weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                this.week_now = weeks[new Date().getDay()];
            }, 60000);
        },