The pitfalls encountered in the project have not been recorded before. When encountering them repeatedly, there will always be a feeling of deja vu, but I forget how to solve them at that time. Write an article and keep updating the problems you usually encounter, no matter how big or small, write them down.
Vue uses the el-selected drop-down box option to be blocked by another el-selected
vue version is 2.x
The specific problems of the interface are as follows:
The second drop-down box blocks the options of the first drop-down box. This is a hierarchical display problem. I encountered this problem because of the requirement to customize the drop-down box and the drop-down option box.
Code structure: div title el-select /div both. The solution is to add a class, set the position to relative, and then adjust the z-Index level.
Because you want to customize the style of the drop-down box, you need to change the value of popper-append-to-body to false
In this way, the drop-down option box will not be placed under the body, so there is no need to set the global style, and you can directly use /deep/ to change it.
final effect
vue time picker set range
The request is limited to the range of today and the next two days. I found a way to find the way before Baidu, but I can't find the original page. Document it here.
<el-date-picker
format="yyyy-MM-dd HH时"
size="small"
:clearable="false"
type="datetime"
v-model="selectedTime"
value-format="yyyy-MM-dd HH"
:picker-options="expireTimeOPtion"
>format sets the display format, and the selector displays "2022-10-18 15", cancels the built-in clear button, and value-format sets the format of the return value of the selector, such as "2022-10-18 15" value. The main code logic is in the expireTimeOPtion object. Set in data.
expireTimeOPtion: {
disabledDate (time) {
const times = new Date(new Date().toLocaleDateString()).getTime() + 3 * 8.64e7 - 1
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times// 如果没有后面的-8.64e7就是不可以选择今天的
}
}In this way, when you choose, you will find that other dates are not available in gray.
It should be noted that after setting the value-format format to "yyyy-MM-dd HH", the value of selectedTime can be directly passed to new Date(), and the selector of el will convert it, but the subsequent value format will become "yyyy-MM-dd HH". The value of selectedTime is useful in other places. If the format requires it, it is recommended to set the initial value to an empty string. Process it in the mounted method and convert it to the "yyyy-MM-dd HH" format.
Vue-Treeselect component adds mouse hover prompt
A tree drop-down box component is used, and the api document is as follows:
Vue-Treeselect | Vue-Treeselect Chinese Website
Because the name of the department unit is too long, a mouse hover prompt should be added. I found the answer from this article to prevent failure, and record it in my own article. The original article uses label, and el-tooltip is used here.
Original link:
Vue-treeselect adds suspension prompts
Add a tip text prompt to the treeSelect prompt box
The actual added code is these:
<el-tooltip slot="option-label" slot-scope="{node, shouldShowCount, count,labelClassName, countClassName}" :content="node.label" :class="labelClassName" placement="top-start">
<span>{
{node.label}}</span>
</el-tooltip>