Vue项目 - HelloWorld开发者社区

vue项目添加菜单

vue是基于组件:vm的components，一个 vue component （或者说 vue instance，两者只有细微差别）可以看成是 view 和 model 的结合，或者更直接一点：template + model。model 的属性（props）可以在 view 中引用时赋值，model 的数据（data）可以被 view 取用。还有其他一些 view 和 model 的调用关系。
具体可以参考：https://www.jianshu.com/p/937...

所以针对于组建开发方式,我们可以按照如下步骤：

1、添加组建

Vue项目
index.js用于记录菜单路由:

import { modName } from './vars'

/** @type {import('vue-router').RouteConfig[]} */
const routes = [
  {
    path: `/${modName}`,
    meta: { title: '计费', icon: 'menu', permissionTag: 'bill' },
    children: [
      {
        path: 'recharge',
        component: () => import('./views/recharge/Index.vue'),
        meta: { title: '充值管理', permissionTag: 'bill_recharge' }
      }
    ]
  }
]
export default { routes }

vars.js是配置的路由中变量
export const modName = 'bill'

Index.vue就是我们的组建:component

<template>
  <ui-table-view v-bind="viewProps" v-on="viewListeners">
    <template #search>
      <el-form-item v-if="isAdmin" label="所属企业">
        <ui-ent-select v-model="searchForm.entid" @change="onSearch" />
      </el-form-item>
    </template>

    <template #actions>
      <el-button type="primary" icon="el-icon-plus" @click="onEdit()">充值</el-button>
    </template>
  </ui-table-view>
</template>
<script>
export default {
  name: 'BillRecharge',
  mixins: [window.mixTableView],
  data () {
    return {
      columns: [
        { type: 'selection', selectable: row => row.state },
        { label: '金额', prop: 'username' },
        { label: '发票信息', prop: 'name' },
        { label: '是否开票', prop: 'workNo', minWidth: 80 },
        { label: '说明', prop: 'phone' },
        {
          label: '操作',
          width: 210,
          fixed: 'right',
          render: (h, { row }) => this.$hBtns([
            // (+row.createByEntid !== 0 || +this.userData.entid === 0) &&
            { label: '设置角色', action: this.onSettingRoles },
            { label: '修改密码', action: this.onUpdatePwd },
            { label: '编辑', action: this.onEdit },
            { label: '删除', action: this.onDelete }
          ])(h, { row })
        }
      ],
      roles: []
    }
  },
  computed: {
    userData () {
      return this.$store.state.userData
    },
    isAdmin () {
      return this.$store.getters.isAdmin
    }
  },
  mounted () {
  },
  methods: {
    getInitData () {
      this.getData()
      this.getRoles()
    }
  }
}
</script>