element-plus

1、el-table自定义表格偶数及奇数背景

<template><el-table:row-class-name="tableRowClassName"></el-table>
</template>
<script setup>const tableRowClassName = ({ rowIndex }) => {const index = rowIndex + 1if (index % 2 === 0) {return 'even-number'} else if (index % 2 === 1) {return 'odd-number'}}
</script><style lang="scss" scoped>
:deep(.odd-number) {background-color: #F3F3F5;
}
</style>

2、el-table自定义表头背景

<template><el-table:header-cell-style="headerName"></el-table>
</template>
<script setup>const headerName = () => {return 'background: linear-gradient(180deg, #E8E8E8 0%, #CCCCCC 100%)'}
</script>

3、el-date-picker自定义图标

<template><el-date-picker:prefix-icon="customPrefix"></el-date-picker>
</template><script setup>const customPrefix = shallowRef({render () { // class为自定义的图标类名return h('p', { class: 'icon-rili-01 font_family icon-size' })}})
</script>
<style> // 不需要修改图标定位的不用写
:deep(.el-input__prefix) { // element plus 日历中图标的类名是el-input__prefixright: 5px;left: unset; // element设置的定位，left为5px，这里取消默认的left
}
</style>

4、el-menu绑定router

<template><div class="side-bar"><el-menuclass="el-menu-vertical-demo":default-active="$route.path"  // 记得绑定router><el-sub-menu  v-for="(item, key) in menuList":key="key":index="key+''"><template #title><span>{{ item.menuName }}</span></template><el-menu-item-group v-for="(childItem, childKey) in item.children" :key="childKey"><el-menu-item :index="childItem.url">{{ childItem.menuName }}</el-menu-item></el-menu-item-group></el-sub-menu></el-menu></div></template><script setup>
import { reactive } from 'vue'const menuList = reactive([{menuName: 'slurm可视化',children: [{ menuName: '工作列表', url: '/slurm'}]},{menuName: '显卡列表',children: [{ menuName: '录入显卡', url: '/graphicsCard'}]},{menuName: '录入算法任务',children: [{ menuName: '录入任务', url: '/algorithm'}]},{menuName: '设置',children: [{ menuName: '权限分配', url: '/setting/permissions', name: 'permissions' },{ menuName: '用户列表', url: '/setting/userList', name: 'user' },{ menuName: '角色分配', url: '/setting/role', name: 'role' }]}
])

5、图标使用

$ npm install @element-plus/icons-vue
或
$ yarn add @element-plus/icons-vue
或
$ pnpm install @element-plus/icons-vue<template>
<el-icon size="18px" color="#fff"><refresh />
</el-icon>
</template>
<script>
import { Refresh, Search } from '@element-plus/icons-vue' // 第一个字母切记需要大写，除此之外与标签显示一致
</script>

6、table表格显示数组内容

直接展示当前字段时会把’[’ ']'也显示出来

<el-table-columnproperty="free_param"label="自由参数定制">// 假设scope.row.free_param为[1,3,4,5,6]<template #default="scope"><template v-if="scope.row.free_param.length"><p v-for="itemin scope.row.free_param">{{ item }}</p></template><template v-else>—</template></template>
</el-table-column>

7、同一个form-item多个输入框(可增减)，并进行表单验证

// --------template
<el-formref="formRef":model="form":rules="rules"label-position="left"label-width="120px"
>
<el-form-itemlabel="自由参数定制"class="free-param"prop="free_param"><!-- v-for="item in form.free_param" --><div class="free-param-one"><el-input v-model="form.free_param[0]"></el-input><span @click="addFreeParam"><el-icon size="20px"><Plus /></el-icon></span></div><template v-if="form.free_param.length > 1"><divclass="free-param-one"v-for="(item, index) in form.free_param.length - 1"><el-input v-model="form.free_param[index+1]"></el-input><span @click="minusFreeParam(index+1)"><el-icon><Minus /></el-icon></span></div></template></el-form-item>
</el-form>// ---------js
import { reactive } from 'vue'
const form = reactive({free_param: []
})
const validateName = (rule, value, callback) => { // 只允许输入英文/标点符号/数字const title= /^[0-9\a-\z\A-\Z]|["',，.。/、\]\[【】\\n\s！!?？——_<>%;‘’；)《（）》(&+=`“”·*#@@]/const zh = /[\u4e00-\u9fa5]$/const data = value.every((item) => {if (!title.test(item) || zh.test(item)) {callback(new Error('仅支持输入英文、标点符号、数字'))} else {return true}})if (data) callback()
}
const rules = reactive({free_param: [{ required: true, message: '仅支持输入英文、标点符号、数字', trigger: 'blur' },{ max: 10, validator: validateName, trigger: 'blur' }]
})const addFreeParam = (val) => {// 若有空值，则不允许再次添加输入框let flag = trueform.free_param.forEach((item) => {if (!item.trim()) flag = false}) if (!flag) returnform.free_param.push('')
}
const minusFreeParam = (index) => {form.free_param.splice(index, 1)
}// ---------------css
.free-param {.el-form-item__content {.free-param-one {display: flex;width: 100%;}.free-param-one+.free-param-one {margin-top: 10px;}.el-icon {font-size: 22px;margin-left: 5px;height: 100%;cursor: pointer;}}
}

8.el-select自定义模板添加全选功能

因需求需要，对element-plus select选择器做了一点改动

<!-- 全选选择器组件 -->
<template><el-select v-model="selectValue":filterable="filterable"  // 可搜索:multiple="multiple"     // 可多选:collapse-tags="collapseTags" // 多选时是否将选中值按文字的形式展示:collapse-tags-tooltip="collapseTags && collapseTagsTooltip" // 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true:default-first-option="defaultFirstOption && filterable" // 是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用@change="$emit('selectChange', selectValue)" // 选择器改变触发父组件方法以传更改后的值>   <el-checkbox v-model="checkedBoxValue" style="width: 100%;padding-left:15px;"label="全选" @change="handleAllChange" /><el-optionv-for="item in options":key="item.key":label="item.value" :value="item.key"><span>{{ item.value }}</span></el-option></el-select></template>
<script setup>
const props = defineProps({options: {type: Array,default: []},filterable: {type: Boolean,default: true},multiple: {type: Boolean,default: true},collapseTags: {type: Boolean,default: true},collapseTagsTooltip: {type: Boolean,default: true},defaultFirstOption: {type: Boolean,default: true}
})
const checkedBoxValue = ref(true) // 【全选】默认为选中状态
const selectValue = ref([])
const emits = defineEmits(['selectChange'])
const handleAllChange = (val) => {if (checkedBoxValue.value) {selectValue.value = props.options.map(item => {return item.key // 可以修改【全选】时下方选项的状态})// 点击【全选】触发更改事件emits('selectChange', selectValue.value)} else {selectValue.value = []emits('selectChange', selectValue.value)}
}
watchEffect((val) => { // 初始监听数据if(checkedBoxValue.value) {selectValue.value = props.options.map(item => {return item.key})}
})
watch(selectValue,(newValue) => {checkedBoxValue.value = newValue.length === props.options.length}
)
</script>

使用：

 <el-form-item label="病理指标"><pathology-select:options="pathologyOptions"ref="projectSelectRef"@selectChange="pathologyChange"/></el-form-item>const pathologyOptions = reactive([{key: 0, value: '第一个'},{key: 1, value: '第二个'},{key: 2, value: '第三个'},{key: 3, value: '第四个'},{key: 4, value: '第五个'},{key: 5, value: '第六个'}])const pathologyChange = (val) => {console.log(val)}

效果如下

QQ录屏20220714150507

9、popover与tooltip组合使用

 <el-tooltipeffect="light"content="快捷键说明"placement="left":append-to-body="false"><el-icon :size="18"class="button"ref="ShortcutKeyRef" // 为了popover中的virtual-ref字段@click.stop="ShortcutKey = true"><QuestionFilled /></el-icon></el-tooltip><el-popovereffect="light" trigger="click"placement="left":virtual-ref="ShortcutKeyRef" // 需与tooltip中的ref组合使用virtual-triggering  // 加上该字段可以不显示ElementPlusError: [ElOnlyChild] no valid child node found的警告> <div><b>快捷键说明</b><el-icon @click="ShortcutKey = false"><Close /></el-icon></div></el-popover>const ShortcutKey = ref(false)
const ShortcutKeyRef = ref()

element-plus小demo相关推荐

android jsoup简书,jsoup爬虫简书首页数据做个小Demo
昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固,比如java反射注解,知道一点就是说不出来,很尴尬... 生命不止,学习不止啊之前那个项目 Q ...
jsoup爬虫简书首页数据做个小Demo
代码地址如下: http://www.demodashi.com/demo/11643.html 昨天LZ去面试,遇到一个大牛,被血虐一番,发现自己基础还是很薄弱,对java一些原理掌握的还是不够稳固 ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
SpringBoot-Vue实现增删改查及分页小DEMO
SpringBoot-Vue实现增删改查及分页小DEMO 前言主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查.分页功能以及了解Springboot ...
Jsoup小Demo
Jsoup小Demo public class JsoupUtil {public void parseWangYi() {Document doc = null;try {//eg1:解析百度音乐d ...
java爬虫黑马百度云,Java爬虫小Demo java爬取百度风云榜数据
Java爬虫小Demo java爬取百度风云榜数据很简单的一个小例子,使用到了java的爬虫框架 jsoup ,一起啦看看实现的方法吧! 相关推荐:Python爬虫实战 python爬虫爬取百度风云 ...
【Java】Jsoup爬虫,一个简单获取京东商品信息的小Demo
简单记录 - Jsoup爬虫入门实战数据问题?数据库获取,消息队列中获取中,都可以成为数据源,爬虫! 爬取数据:(获取请求返回的页面信息,筛选出我们想要的数据就可以了!) 我们经常需要分析HTML网 ...
金融新手投标模块布局小Demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
运用vue.js写的表格小demo
2019独角兽企业重金招聘Python工程师标准>>> 最近在学习vue.js,我把工作中项目里面的一个小实例用vue.js重构了下,写成一个小demo,巩固自己所学,并与大家分享, ...
入门Leaflet之小Demo
入门 Leaflet 之小 Demo 写在前面 ---- WebGIS 开发基础之 Leaflet GIS 基本概念:GIS.Map.Layer.Feature.Geometry.Symbol.Dat ...

element-plus小demo

element-plus

1、el-table自定义表格偶数及奇数背景

2、el-table自定义表头背景

3、el-date-picker自定义图标

4、el-menu绑定router

5、图标使用

6、table表格显示数组内容

7、同一个form-item多个输入框(可增减)，并进行表单验证

8.el-select自定义模板添加全选功能

9、popover与tooltip组合使用

element-plus小demo相关推荐

最新文章

热门文章