element-ui的el-switch 点击时,保持当前状态不变并弹窗提示
遇到问题：点击开关后,弹窗之后还未进行选择,状态已经改变了
原因: 数据绑定使用的是v-model
解决:改成:value
<template slot-scope="scope"> <el-switch :value="scope.row.status" :active-value="0" :inactive-value="1" @change="handleStatusChange(scope.row)" ></el-switch> </template>
handleStatusChange(row) { let text = row.status == "0" ? "停用" : "启用"; this.$confirm('确认要"' + text + '""' + row.userName + '"用户吗?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function() { return changeUserStatus(row.userId, status); }).then(() => { this.msgSuccess(text + "成功"); this.getList(); }).catch(function() { }); },
element select 传参
遇到业务场景 需要change事件传id name
value-key="id" 必须带上
<el-select v-model="selfInfo.province" :placeholder="currInfo.province" value-key="id" @change="handelPro" > <el-option v-for="item in proData" :key="item.id" :label="item.name" :value="item" > </el-option> </el-select>
element-ui 表格里switch初始化
后台返回switch的状态为number 0 1
</el-table-column> <el-table-column label="是否启用" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.enabledFlag" :active-value='1' :inactive-value='0' @change="updateUserinfo(scope.row)" > </el-switch> </template> </el-table-column>
element ui datePicker 设置当前日期之前/之后的日期不可选
<template> <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker> </template> <script> export default { data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; }, } } } }
<template> <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-picker> </template> <script> export default { data() { return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now(); } } } } }
