vue+element小技巧

需求：因平时写写pc端比较少，本次因工作需要做一个element+vue的后台管理项目，特此记录一下小东西，毕竟好记性不如烂笔头

1.改一些表单类的组件样式时，可以通过检查打开控制台用elemnts来指向需要改的地方，找到class，复制到页面重新赋值，做到更改细微的样式。

2.表格：

<el-table
:data="tableData"
	stripe
	 height="250"  		//定义height属性，实现固定表头的表格，并超出部分出现滚动条
	:header-cell-style="{background:'#E0E0E0'}"		//表头改变颜色
	style="width: 100%">
		<el-table-column
				prop="address"
				label="客户姓名"
				align="center">	//文本居中
		</el-table-column>
		
		<el-table-column label="操作" align="center">   //插槽写自定义
			<template slot-scope="scope">
				<div style="color: #2671E2;">查看详情</div>
			</template>
		</el-table-column>
</el-table>

3.分页器向左靠齐

	.block{
			width: 100%;
			margin-top: 26px;
			display: flex;           //重点1
		}
		.blockbox{
			margin-left: auto;   //重点2
		}
			<div class="block"> //div包div然后给block使用display: flex;然后给blockbox使用margin-left: auto;即可
			<div class="blockbox">
				<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage4"
						:page-sizes="[100, 200, 300, 400]"
						:page-size="100"
						layout="total, sizes, prev, pager, next, jumper"
						:total="400">
				</el-pagination>
			</div>
		</div>

4.使用el-date-picker选择时间

<el-date-picker  
	@change="confirmtime()" 
	v-model="customtime"
	 type="daterange"
	  :default-time="['00:00:00', '23:59:59']"
       value-format="yyyy-MM-dd"
	 range-separator="至"
	 start-placeholder="开始日期"
	 end-placeholder="结束日期">
</el-date-picker>
   //时间发生变化  置空el-date-picker所选的时间：this.customtime="[]";  即可
	confirmtime(){
		 this.fromobj.starttime = this.customtime[0];//开始时间	
        this.fromobj.endoftime = this.customtime[1];//结束时间
	},

5.禁止浏览器文本框自动填充

普通输入框 用autoComplete="off"
<input type="password" autoComplete="off"/>

element 输入框 用auto-complete="new-password"
<el-input v-model="form.password" show-password auto-complete="new-password"></el-input>

6.ui table tooltip设置宽度

 :show-overflow-tooltip="true"使用这个属性
 <el-table-column	prop="address"   :show-overflow-tooltip="true"	label="客户姓名"></el-table-column>
 在全局App.vue里添加css
 .el-tooltip__popper {
    max-width: 100px;
}
注意：包裹这个css的style标签不能添加 scoped属性，不然不会生效。

低速更新中-----