Foreword When multiple categories are encountered on the management side, they are required to be displayed hierarchically, and each category has additional operations. For example: add category, edit category, delete, drag to category, etc. The following will record such a demand internship process. Understand needs Classified display displayed by level Categories display operable buttons based […]
Tag: tui
The capital of SwiftUI code debugging is caused by “change of heart”
0. Overview This is a very simple piece of SwiftUI code, we pass the Item array to the subview and modify it in the subview, and the modified results are immediately reflected in the main view. Unfortunately, when we modified the Item name, we found that we couldn’t input continuously: every time we typed a […]
vue+elementUI tree selection box, upload attachments, ready to use;
<template> <div style=”margin-bottom: 3.75rem;”> <el-card class=”box-card” :body-style=”{ padding: ‘0px’ }” style=”height: 100%;”> <div style=”margin: 1rem;”> <el-button type=”danger” @click=”delRec”>Delete</el-button> <el-button type=”primary”>Refresh</el-button> </div> <el-table highlight-current-row :key=”key” @cell-dblclick=”doubleClick” :header-cell-style=”{‘text-align’:’center’}” :cell-style=”{‘text-align’:’center’}” style=”width: 100%;margin: 0.25rem;” :data=”tableData.slice((currentPage – 1) * pageSize, currentPage * pageSize)” @selection-change=”handleSelectionchange” border> <el-table-column type=”selection” width=”50px”/> <el-table-column type=”index” label=”serial number” width=”50px”/> <el-table-column prop=”address” label=”title”/> <el-table-column prop=”name” label=”Sender”/> <el-table-column […]
elementUI date type selector and partial date conversion
1. The date picker cannot select across years: <el-date-picker v-model=’timerange’ :picker-options=’rangeoption’ type=’daterange’ placement=’bottom-end’ size=’small’ :clearable=”false” style=’width: 260px;’ range-separator=’to’ placeholder=’Please select a date range’ start-placeholder=’Start date’ end-placeholder=’End date’ @change=’changeBytime’> </el-date-picker> When defined: choiceDate: ”, rangeoption: { onPick: ({ maxDate, minDate }) => { this.choiceDate = minDate.getTime() if (maxDate) { this.choiceDate = ” } }, disabledDate: (time) […]
Exploration and practice of building Window desktop applications using ElementUI components (WinForm)
Tip: Keep your mind clean Before you work on your software, you need to clean up your memory. Throw away everything in your mind for the time being. If you have trouble with something, don’t let it influence you. It is mostly the case that trouble will go away. If the trouble is so heavy […]
Use the el-collapse folding panel in elementui to implement the drop-down menu
<template> <div class=”left-factor-library-name”> <div class=”left-tree”> <div class=”tree-top”>Table name</div> <div class=”sub-input”> <el-input clearable placeholder=”search” @input=”factorNameSearch()” v-model=”factorName” size=”small” clear=”el-inp” /> </div> <div class=”tree-content” v-if=”dataTree & amp; & amp;dataTree.length>0″> <!– <el-collapse v-model=”activeName” accordion v-for=”(item,index) in dataTree” :key=”index”> <el-tooltip class=”item” effect=”dark” :content=”item.name” placement=”right”> <div @click=”menuClick(item)” :class=”[activeIndex === item.id ? ‘bottom-tabs-active’ : ”,’collapse-items’]” style=”line-height:30px;”> {<!– –>{ item.name }} </div> </el-tooltip> […]
vue3+elementui plus implements the addition and modification of multi-select paging lists
vue3 + elementui plus implements the addition and modification of multi-select paging lists The business needs to realize such a requirement, which requires that a pop-up box be opened when adding a tag (the pop-up box is as shown below). Normally, the list is displayed on one page and multiple selections are made. This is […]
elementUI table multi-row total
Record (pseudo) multi-row total row effect <template> <el-table :data=”tableData” :border=”true” height=”624″ class=”tableList” ref=”patroTable” show-summary :summary-method=”getSummaryMethod” style=”width: 100%;”> <el-table-column fixed prop=”fqrdwmc” label=”organization” show-overflow-tooltip align=”center”></el-table-column> <el-table-column label=”Total number of work orders” show-overflow-tooltip align=”center”> <el-table-column prop=”cycle” label=”Periodic” show-overflow-tooltip align=”center”></el-table-column> <el-table-column prop=”temporary” label=”Temporary” show-overflow-tooltip align=”center”></el-table-column> </el-table-column> <el-table-column label=”Number of devices” show-overflow-tooltip align=”center”> <el-table-column prop=”zf” label=”Station Room” show-overflow-tooltip align=”center”></el-table-column> <el-table-column […]
elementUI summary date plug-in related
1.el-date-picker selects the month range from the beginning of the month to the end of the month Initialization: state.condition.date: [new Date(formatDate(getCycle(-7), 2) + ‘ 00:00:00’), new Date(formatDate(getCycle(0), 2) + ‘ 23:59:59’)], <!– Statistics by month –> <div class=”search-data”> <el-date-picker v-if=”state.condition.queryGranularity == ‘6’” style=”width: 300px” v-model=”state.condition.date” type=”monthrange” align=”right” unlink-panels range-separator=”to” start-placeholder=”start date” end-placeholder=”end date” @change=”monthChange” :default-time=”[new […]
How to create a floating action button in SwiftUI
Article directory Preface Create a floating action button The floating button appears at the front of the screen The floating button is located in the lower right corner of the screen Make the floating button appear circular add shadow Summarize Foreword Floating Action Button (FAB) is a UI element used in Android and Material Design. […]