admin-template-vue3js/src/views/system/menus/parts/menu-table.vue

<template>
  <div id="menu-table">
    <el-table :data="data" row-key="_id" border>
      <el-table-column align="center" label="顺序" sortable prop="order_num" width="80"></el-table-column>
      <el-table-column align="center" label="图标" width="80">
        <template #default="{ row }"><span :class="['iconfont', row.icon]"></span></template>
      </el-table-column>
      <el-table-column align="center" label="菜单名称" prop="name"></el-table-column>
      <el-table-column align="center" label="路由名称" prop="route_name"></el-table-column>
      <el-table-column align="center" label="父级菜单" prop="parent_name"></el-table-column>

      <el-table-column align="center" label="路由地址" prop="path"></el-table-column>
      <el-table-column align="center" label="组件地址" prop="component"></el-table-column>
      <el-table-column align="center" label="菜单类型" prop="type" width="100">
        <template #default="{ row }">{{ getType(row) }} </template>
      </el-table-column>
      <el-table-column align="center" label="状态" prop="is_use" width="80">
        <template #default="{ row }">
          <el-tag v-if="row.is_use === '0'" type="success"> {{ getStatus(row) }} </el-tag>
          <el-tag v-else type="info"> {{ getStatus(row) }} </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark" width="100"> </el-table-column>
      <el-table-column align="center" :label="$t('common.opera')">
        <template #default="{ row }">
          <el-link :underline="false" type="primary" size="mini" @click="toUpdate(row)" style="margin-right: 10px">{{
            $t('common.update') }}</el-link>
          <el-link :underline="false" type="primary" size="mini" @click="toAddNext(row)" style="margin-right: 10px">
            添加下一级
          </el-link>
          <el-link v-if="row.is_default !== '0'" :underline="false" type="danger" size="mini" @click="toDelete(row)">
            {{ $t('common.delete') }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const data = inject('menuTree', [])
const typeList = inject('typeList', [])
const toUpdate = inject('toUpdate')
const toAddNext = inject('toAddNext')
const toDelete = inject('toDelete')
const { t } = useI18n()
const getType = (row) => {
  let word = ''
  const r = typeList.find((f) => f.value === row.type)
  if (r) word = r.label
  return word
}
const getStatus = (row) => {
  let word = ''
  switch (row.is_use) {
    case '0':
      word = t('common.is_use_abled')
      break
    case '1':
      word = t('common.is_use_disabled')
      break

    default:
      break
  }
  return word
}
</script>
<style scoped></style>