elementplus常用
大约 4 分钟
elementplus常用
分页修改背景色
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
background-color: #494893 !important;
}角色分配权限菜单
<!-- 角色管理 -->
<!-- 别删，多按钮分配的流程 -->
<template>
<div class="positions" ref="supHeight">
<el-tree class="positions_row_right" v-model="ruleForm.menuIds" default-expand-all :data="dataList" show-checkbox
node-key="id" @check="setUseCheck" :default-checked-keys="ruleForm.menuIds"
:props="{ ...defaultProps, class: customNodeClass }" />
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
// 编辑/新增数据
let ruleForm: any = ref({
name: "",//角色名称
resource: "",////菜单数组
menuIds: ""
})
// 菜单选取
const setUseCheck = (checkedNodes: any, e: any) => {
console.log(e.checkedKeys)
e.checkedKeys.map((item: any, index: any) => {
if (item == null) {
e.checkedKeys.splice(index, 1)
}
})
ruleForm.value.menuIds = e.checkedKeys
}
const customNodeClass: any = (dataList: any, node: Node) => {
if (dataList.enable==true || dataList.enable==false) {
return 'is-penultimate'
}
return null
}
const defaultProps = {
children: 'modules',
label: 'view',
class: 'is-penultimate'
}
let dataList = ref<any>()
onMounted(() => {
dataList.value = [
{
"view": "供应商管理",
"modules": [
{
"name": "SUPPLIER",
"view": "机票供应商管理",
"enable": true,
"actions": [
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
},
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
},
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
},
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
}
]
},
{
"name": "SUPPLIER_INTERFACE",
"view": "机票供应商接口管理",
"enable": false,
"actions": [
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
}
]
}
]
},
{
"view": "机票政策管理",
"modules": [
{
"name": "POLICY",
"view": "政策管理",
"enable": true,
"actions": [
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
}
]
}
]
},
{
"view": "报表中心",
"modules": [
{
"name": "supplierFlowReport",
"view": "供应商流量报表",
"enable": true,
"actions": [
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
}
]
}
]
},
{
"view": "基本设置",
"modules": [
{
"name": "ACCOUNT",
"view": "员工账号密码管理",
"enable": false,
"actions": [
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
}
]
},
{
"name": "deptMgmt",
"view": "部门管理",
"enable": true,
"actions": [
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
}
]
},
{
"name": "positionMgmt",
"view": "职位管理",
"enable": false,
"actions": [
{
"name": "CREATE",
"configurable": true,
"enable": true
},
{
"name": "DELETE",
"configurable": true,
"enable": true
},
{
"name": "EDIT",
"configurable": true,
"enable": true
},
{
"name": "VIEW",
"configurable": true,
"enable": true
}
]
}
]
}
]
// 数据组织
dataList.value.map((item: any, index: number) => {
item.id = index + 1
item.name = item.view
item.modules.map((items: any, indexs: any) => {
items.id = Number(item.id + '' + (indexs + 1))
items.actions.map((itemt: any, indext: number) => {
itemt.view = itemt.name
itemt.id = Number(items.id + '' + (indext + 1))
})
items.modules = items.actions
})
})
console.log(dataList.value)
})
</script>
<style lang="scss">
.is-penultimate > .el-tree-node__content {
color: #626aef;
}
.el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
display: flex;
flex-wrap: wrap;
}
.is-penultimate > .el-tree-node__children > div {
width: 25%;
}
.is-penultimate >.el-collapse-transition-leave-active{
display: flex !important;
}
.is-penultimate >.el-collapse-transition-enter-active{
flex-direction: row !important;
}
</style>效果
element plus的table合并单元格
就element+中的el-table中的span-method方法的使用和遇到的一些问题 如果想要将后一列挨着的单元格合并，return 1,2,但是得将后一个单元格设置为 0，0，不然会被推走
<template>
<div>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%"
>
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="amount1" sortable label="Amount 1" />
<el-table-column prop="amount2" sortable label="Amount 2" />
<el-table-column prop="amount3" sortable label="Amount 3" />
</el-table>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="name" label="Name" />
<el-table-column prop="amount1" label="Amount 1" />
<el-table-column prop="amount2" label="Amount 2" />
<el-table-column prop="amount3" label="Amount 3" />
</el-table>
</div>
</template>
<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'
interface User {
id: string
name: string
amount1: string
amount2: string
amount3: number
}
interface SpanMethodProps {
row: User
column: TableColumnCtx<User>
rowIndex: number
columnIndex: number
}
const arraySpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return { //这里表示，单前单元格和后一列的单元格合并
rowspan: 1,
colspan: 2,
}
}
else { //返回11表示此单元显示
return {
rowspan: 1,
colspan: 1,
}
}
}else if(columnIndex === 1){
if (rowIndex % 2 === 0) {
return { //返回00表示此单元格移出
rowspan: 0,
colspan: 0,
}
}
else {
return {
rowspan: 1,
colspan: 1,
}
}
}
}
const tableData: User[] = [
{
id: '合计',
name: 'Tom',
amount1: '234',
amount2: '3.2',
amount3: 10,
},
{
id: '12987123',
name: 'Tom',
amount1: '165',
amount2: '4.43',
amount3: 12,
},
{
id: '合计',
name: 'Tom',
amount1: '324',
amount2: '1.9',
amount3: 9,
},
{
id: '12987125',
name: 'Tom',
amount1: '621',
amount2: '2.2',
amount3: 17,
},
{
id: '合计',
name: 'Tom',
amount1: '539',
amount2: '4.1',
amount3: 15,
},
]
</script>修改el-input 的placeholder样式
:deep(.el-input__inner::placeholder){
font-size: 12px;
}按F12后动态监听窗口大小
<template>
<div class="cont" ref="contHeight">
</div>
</template>
<script setup lang="ts">
import { onMounted,onUnmounted,ref } from 'vue';
// 页面高度
let contHeight = ref()
//这里监听页面大小
const updateWindowWidth = () => {
let contHeights = contHeight.value?.clientHeight
}
onMounted(() => {
// 整个页面高度
let contHeights = contHeight.value?.clientHeight
window.addEventListener('resize', updateWindowWidth)
getQueryOrder()
})
onUnmounted(() => {
window.removeEventListener('resize', updateWindowWidth)
})
</script>
<style scoped lang="scss">
</style>