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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。