vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能

更新時間：2022年04月13日 10:02:30 作者：搬磚狗-小強

這篇文章主要介紹了vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結構，el-tree組件中filter-node-method事件便可以實現樹形菜單篩選過濾功能，需要的朋友可以參考下

菜單管理是一套系統(tǒng)中最常見最核心的系統(tǒng)管理模塊之一，我把菜單管理分成了2個部分，左邊可以管理維護菜單，在菜單的最右側可以維護每個菜單按鈕權限配置

使用element-plus el-tree組件快速開發(fā)樹形菜單結構，el-tree組件中filter-node-method事件便可以實現樹形菜單篩選過濾功能

<template>
  <div class="common-tree">
    <el-tree
      :ref="treeRef"
      :data="treeData"
      :check-strictly="checkStrictly"
      show-checkbox
      :accordion="false"
      node-key="id"
      default-expand-all
      :highlight-current="true"
      :expand-on-click-node="false"
      @node-click="nodeClick"
      :filter-node-method="filterNode"
      empty-text="暫無數據"
    >
     <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span style="margin-right: 15px;">{{ data.name }}</span>
           <slot
            :data="data"
            :node="node"
          />
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
import { returnStatement } from '@babel/types';
 
export default {
  name: 'CommonTree',
  props: {
    treeRef: {
      type: String,
      default: "treeRef"
    },
    treeData: {
      type: Array,
      required: true,
      default () {
        return []
      }
    },
    checkStrictly: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  setup(props, { emit }) {
    const nodeClick = (data, node, tree) => {
      emit('nodeClick', data, node, tree)
    }
    const filterNode = (value, data) => {
      if (!value) return true
      return data.label.includes(value)
    }
    
    return { nodeClick, filterNode }
  }
}
</script>

使用element-plus el-dialog、el-icon、el-form組件實現菜單新增編輯

el-dialog組件實現彈窗，選擇圖標功能，父組件通過v-model綁定變量，子組件通過emit('update語法糖實現父子組件屬性快速傳遞

子組件代碼：

<template>
  <el-dialog width="800px" v-model="visible" title="圖標" :before-close="handleClose" >
    <ul class="iconUl">
      <li v-for="icon in iconList" :key="icon">
        <span :class="{'active':choosedIcon === icon}"
          @click="chooseIcon(icon)"
          @dblclick="confirm(icon)"
        >
            <el-icon style="width:48px;height: 48px;"><component class="icon" :is="icon" /></el-icon>
        </span>
        <p>{{ icon }}</p>
      </li>
    </ul>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirm(choosedIcon)">確認</el-button>
        <el-button @click="this.$emit('update:visible', false)">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, reactive } from 'vue'
import * as IconsModule from '@element-plus/icons-vue'
 
export default {
  name: 'Icons',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const iconList = ref([])
    const choosedIcon = ref(null)
 
    for (var key in IconsModule) {
      iconList.value.push(IconsModule[key].name)
    }
    const chooseIcon = (icon) => {
      choosedIcon.value = icon
    }
    const confirm = (icon) => {
      emit('update:icon', icon)
      emit('update:visible', false)
    }
    const handleClose = (done) => {
      emit('update:visible', false)
    } 
    return { iconList, choosedIcon, chooseIcon, confirm, handleClose }
  }
}

父組件代碼：

<icons v-model:visible="dialogIconVisible" v-model:icon="menu.icon" />

使用element-plus el-table組件實現菜單按鈕權限配置

菜單按鈕權限配置表格部分代碼：

 <el-table
  ref="resourceTableKey"
  :data="resource.tableData.records"
  stripe 
  empty-text="暫無數據"
  :header-cell-style="{background:'#FCFBFF',border:'0'}"
  style="width: 100%"
  @selection-change="resourceSelectChange"
>
  <el-table-column type="selection" width="40" />
  <el-table-column label="編碼" width="80" show-overflow-tooltip>
    <template #default="scope">{{ scope.row.code }}</template>
  </el-table-column>
  <el-table-column label="名稱" width="80" show-overflow-tooltip>
    <template #default="scope">{{ scope.row.name }}</template>
  </el-table-column>
  <el-table-column label="請求方式" width="80" show-overflow-tooltip>
    <template #default="scope">{{ scope.row.method }}</template>
  </el-table-column>
  <el-table-column label="請求地址" width="80" show-overflow-tooltip>
    <template #default="scope">{{ scope.row.url }}</template>
  </el-table-column>
  <el-table-column label="操作" width="140">
    <template #default="scope">
      <el-button type="primary" size="small" @click="resourceEdit(scope.$index, scope.row)"
        >修改</el-button
      >
      <el-button
        type="danger"
        size="small"
        @click="resourceSingleDelete(scope.$index, scope.row)"
        >刪除</el-button
      >
    </template>
  </el-table-column>
</el-table>
 
// ----------------------編輯菜單按鈕權限配置----------------------------
<script>
const resourceTableKey = ref(null)
 
const resource = reactive({
  queryParams: {
    code: null,
    name: null,
    menuId: null
  },
  tableData: {
    total: 2,
    records: []
  },
  pagination: {
    size: 10,
    current: 1
  },
  formData: {},
  selection: []
})
 
const resourceSearch = () => {
  getResourceList().then(data => {
    resource.tableData.records = data.data
  })
}
 
const resourceAdd = () => {
  dialogEditVisible.value = true
  resource.formData = {}
}
 
const resourceEdit = (index, row) => {
  dialogEditVisible.value = true
  resource.formData = row
}
 
const resourceSingleDelete = (index, row) => {
  ElMessageBox.confirm('確認刪除?',
  '確認刪除',
  {
    confirmButtonText: '確認',
    cancelButtonText: '取消',
    confirmButtonClass: 'confirmButton',
    type: 'warning',
  })
  .then(() => {
    resource.tableData.records.splice(index, 1)
  })
  .catch(() => { })
}
 
const resourceSelectChange = (selection) => {
  resource.selection = selection
}
 
const resourceBatchDelete = () => {
  if (!resource.selection.length) {
    ElMessageBox.alert('請選擇要刪除項！', '提示', { confirmButtonText: '確認', type: 'warning' })
    return
  }
  ElMessageBox.confirm('確認刪除?',
  '確認刪除',
  {
    confirmButtonText: '確認',
    cancelButtonText: '取消',
    type: 'warning',
  })
  .then(() => {
    resource.tableData.records = resource.tableData.records.filter(function(items){
      return (resource.selection.filter(function(selectionItems){
        return selectionItems.id == items.id
      })).length == 0
    })
  })
  .catch(() => { })
}
 
const resourceReturn = { resourceTableKey, resource, resourceEdit, resourceAdd, resourceSingleDelete, resourceSelectChange, resourceBatchDelete }
</script>
// ----------------------編輯菜單按鈕權限配置----------------------------

菜單按鈕權限配置表單部分代碼：

<template>
  <el-dialog width="800px" v-model="visible" title="修改" :before-close="handleClose" >
    <el-form ref="form" :model="fromData" label-position="right" label-width="100px">
      <el-form-item label="編碼" prop="code">
        <el-input v-model="fromData.code" />
        <p class="note">建議使用:作為分隔符，并以view、add、update、delete、export、import、download、upload等關鍵詞結尾</p>
        <p class="note">如：menu:add、 resource:view、 file:upload</p>
      </el-form-item>
      <el-form-item label="名稱" prop="name">
        <el-input v-model="fromData.name" />
      </el-form-item>
      <el-form-item label="請求方式" prop="describe" >
        <el-input v-model="fromData.method" />
      </el-form-item>
      <el-form-item label="請求地址" prop="describe" >
        <el-input v-model="fromData.url" />
      </el-form-item>
      <el-form-item label="描述" prop="describe" >
        <el-input v-model="fromData.describe" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirm()">確認</el-button>
        <el-button @click="this.$emit('update:visible', false)" >取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { ref, reactive, watch } from 'vue'
import { returnStatement } from '@babel/types';
 
export default {
  name: 'edit',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    resource: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { emit }) {
    const fromData = reactive({})
 
    watch(() => props.resource, (newResource) => {
        for (const key in fromData) {
          fromData[key] = ''
        }
        for (const key in newResource) {
          fromData[key] = newResource[key]
        }
    }, { immediate: true })
    
    const confirm = () => {
      for (const key in fromData) {
        props.resource[key] = fromData[key]
      }
      emit('update:visible', false)
    }
    const handleClose = (done) => {
      emit('update:visible', false)
    }
    
    return { confirm, handleClose, fromData }
  }
}
</script>

到此這篇關于vue3使用element-plus搭建后臺管理系統(tǒng)---菜單管理的文章就介紹到這了,更多相關vue3 element-plus后臺管理系統(tǒng)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: