elementUI相关总结

1.Vue+Element中的表格根据属性值来渲染不同的样式，状态设置不同颜色

正则判断写法：
<el-table-column prop="workOrderStatusName" label="状态" align="center">
					<template slot-scope="scope">
						<strong :style="{ color: scope.row.workOrderStatus === 1||scope.row.workOrderStatus === 2 ? '#409EFF':scope.row.workOrderStatus === 6 ? '#13ce66' : '#ED3F14' }">{{ scope.row.workOrderStatusName}}</strong>
					</template>
</el-table-column>
拓展：
//两种状态的判断
<el-table-column label="当前"
   prop="status">
    <template slot-scope="scope">
        <span :style="{ color: scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status === 1 ? '男' : '女' }}</span>
    </template>
</el-table-column>
//三种状态的判断
<el-table-column 
    label="当前" 
    prop="status"
    >
    <template slot-scope="scope">
        <span :style="{ color: scope.row.status === 0 ? '＃ff':scope.row.status === 1 ? '#cccccc' : '#ED3F14' }">{{ scope.row.status == 0 ? '已过期':scope.row.status === 1 ? '授权' : '未授权' }}</span>
    </template>
</el-table-column>

2.el-table表格高度根据页面高度自适应

<el-table :max-height="tableHeight" :data="tableData" highlight-current-row border stripe>	</el-table>
data() {
			return {
				tableHeight: window.innerHeight - 200,
		}	
created() {
			window.addEventListener('resize', this.getTableHeight)
		},
destroyed() {
			window.removeEventListener('resize', this.getTableHeight)
		},
methods: {
			getTableHeight() {
				this.tableHeight = window.innerHeight - 200
			},
			}

3.点击table表格颜色加深当前行

<el-table highlight-current-row ></el-table>
css:
 /* 选中表格改变原始背景色注意得在table增加highlight-current-row才能生效 .BOX 是当前页面div*/
 .BOX tr.current-row>td {
 	background-color: #93bfab !important;
 	color: #fff;
 	font-weight: 700;
 }

4.禁用日期时间选择

elementUI版本：:picker-options

<div>
						<span>查询日期:</span>
						<el-date-picker :clearable="false" :picker-options="pickerOptions" style="width: 18rem;"
							size="small" v-model="formSearch3.date" type="daterange" value-format='timestamp'
							ange-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</div>
data() {
			return {
				pickerOptions: {
					disabledDate(time) {
						// return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
						return time.getTime() > Date.now() 
					}
				}
			}
		},

element-plus版本：disabled-date

<div>
				<span class="titleEvn">记录起止时间:</span>
				<el-config-provider :locale="locale">
					<el-date-picker v-model="formSearch.date" type="datetimerange" start-placeholder="开始日期"
						end-placeholder="结束日期" :disabled-date="disabledDate" value-format="YYYY-MM-DD HH:mm:ss">
					</el-date-picker>
				</el-config-provider>
			</div>
		data() {
			return {
				formSearch: {
					date: []
					// date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
					// date: [new Date(new Date().toLocaleDateString()).getTime() - (24 * 60 * 60 * 1000 * 30), new Date(
					// 	new Date()
					// 	.toLocaleDateString()).getTime()]
				},
				disabledDate(date) {
					return date.getTime() > new Date()
				},
			}
		},

5.如何将elementUI动态渲染的表格里面某列数据进行标红处理

<el-table min-height="200px" :data="state.tableData.list_Row" :max-height="state.tableHeight" stripe style="width: 100%">
				<el-table-column
					align="center"
					v-for="(item, index) in state.tableData.list_Col"
					:key="index"
					:prop="item.prop"
					:width="item.width"
					:label="item.label"
					:cell-style="cellStyle"
				>
					<template #default="scope" v-if="item.label=='总结果'">
						<span v-if="scope.row.item0 == 'NG'||scope.row.item0 == ' NG'" style="background: #ff0000; color: white">{{ scope.row.item0 }}</span>
					</template>
				</el-table-column>
			</el-table>