Select下拉框支持手动输入,创建选择项中不存在的条目
使用自带属性: allow-create
<el-select
v-model="绑定值"
filterable //是否可搜索 必须为true
allow-create //是否允许用户创建新条目,需配合 filterable 使用
default-first-option //在输入框按下回车,选择第一个匹配项。需配合 filterable
placeholder="请选择" // 提示
size="mini" // 最小
>
<el-option
:key="item.id"
:label="item.name"
:value="item.value"
v-for="item in 数据"
>
</el-option>
</el-select>
防止用户输入为空或者为空格字符可以使用正则来进行替换
visibleChange() {
// 判断当前选中的值把空格替换后是否为空
// 截头去尾 会去掉开始和结束的空格,类似于trim
if (this.绑定值.replace(/(^\s*)|(\s*$)/g, '') == '') {
this.绑定值 = ''
this.$message.error('值不可以为空格和空')
}
},
可在select使用change事件,当值发生改变时进行触发判断
el-Tree树形菜单根据后台返回数据回显,父节点选中,子节点全部选中得问题
---查看代码 是否使用为 setCheckedKeys()、default-expanded-keys、default-checked-keys方法或者属性进行数据回显
问题原因:使用getCheckedKeys()会将半选中状态得父节点也获取到,直接都回显数组进行赋值操作,会出现这种情况
let that = this // 获取当前this 防止this指向更改
setTimeout(() => {
返回得数据数组.forEach((item) => {
// 此次得item为返回选中节点的唯一id字段 上方组件上要添加node-key属性
that.$refs.Tree组件自定义的ref属性名.setChecked(item, true, true)
})
}, 500)
el-date-picker时间组件设置默认值
将变量进行赋值:new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
其实使用new Date()也可以达到默认值的效果 在时间组件展示的也是yyyy-MM-dd HH:mm:ss的格式,但是在你进行传值的时候就会发现它只是展示的为这个格式,其实变量值还是中国标准时间格式。
created(){
this.value=new Date()
console.log(this.value)
// 直接使用new Date()进行赋值 展示正确
// 但是值为中国标准时间 Sun Mar 27 2022 00:12:25 GMT+0800 (中国标准时间)
this.value=new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
console.log(this.value)
// 这样就是展示的格式为`yyyy-MM-dd HH:mm:ss`的格式
// 而且输出的也是正确的 2022-03-27 00:14:17
}
el-table表格清除添加高度后的滚动条、跟换指定的滚动样式(谷歌)
// 清除滚动条
::v-deep .el-table__body-wrapper {
&::-webkit-scrollbar {
display: none;
}
& {
scrollbar-width: none;
}
}
// 更改指定样式
::v-deep .el-table__body-wrapper {
&::-webkit-scrollbar { // 设置整个滚动条
width: 10px;
}
&::-webkit-scrollbar-thumb { // 滚动条上的滚动滑块
border-radius: 10px;
background-image: url('../../../../assets/images/icon-scroll.png');
background-size: 100% 100%;
}
&::-webkit-scrollbar-track { // 滚动条轨道 即滚动条后面的轨迹设置
background: url('../../../../assets/images/icon-resource30.png')
no-repeat;
border-radius: 0px;
background-position: center;
}
& {
scrollbar-width: thin;
scrollbar-color: #0972c5 rgba(238, 238, 238, 0);
}
}