新建一个添加的页面

复制page_list页面改改名字 page_add

一个标准的页面

<template>

  <div>

    新增页面

  </div>

</template>

<script>

  import * as cmsApi from '../api/cms'

  export default {

    data() {

      return {

      }

    }

  }

</script>

   <router-link :to="{path:'/cms/page/add'}">

        <el-button type="primary" size="small">新增页面</el-button>

      </router-link>

新建路由

import Home from '@/module/home/page/home.vue';

import page_list from '@/module/cms/page/page_list.vue'

import page_add from '@/module/cms/page/page_add.vue'

export default [{

  path: '/',

  component: Home,

  name: 'CMS',//菜单名称

  hidden: false

  ,

  //redirect: '/home',

  children: [

    {path: '/cms/page/list', name:'页面列表', component: page_list,hidden:false},

    {path: '/cms/page/add', name:'新增页面', component: page_add,hidden:true}

  ]

}


新增页面点击后跳转的页面

 <div>

    <el-form :model="pageForm" label-width="80px" >

      <el-form-item label="所属站点" prop="siteId">

        <el-select v-model="pageForm.siteId" placeholder="请选择站点">

          <el-option

            v-for="item in siteList"

          :key="item.siteId"

          :label="item.siteName"

          :value="item.siteId">

          </el-option>

        </el-select>

      </el-form-item>

      <el-form-item label="页面名称" prop="pageName">

        <el-input v-model="pageForm.pageName" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="别名" prop="pageAliase">

        <el-input v-model="pageForm.pageAliase" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="访问路径" prop="pageWebPath">

        <el-input v-model="pageForm.pageWebPath" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="物理路径" prop="pagePhysicalPath">

        <el-input v-model="pageForm.pagePhysicalPath" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="类型">

        <el-radio-group v-model="pageForm.pageType">

          <el-radio class="radio" label="">静态</el-radio>

          <el-radio class="radio" label="">动态</el-radio>

        </el-radio-group>

      </el-form-item>

      <el-form-item label="创建时间">

        <el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.pageCreateTime">

        </el-date-picker>

      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">

      <el-button type="primary" @click="addSubmit" >提交</el-button>

    </div>

  </div>
 

data() {

      return {

        //站点列表

        siteList: [],

        //模版列表

        templateList: [],

        //新增界面数据

        pageForm: {

          siteId: '',

          templateId: '',

          pageName: '',

          pageAliase: '',

          pageWebPath: '',

          pageParameter: '',

          pagePhysicalPath: '',

          pageType: '',

          pageCreateTime: new Date()

        }

      }

    },

    methods:{

      addSubmit(){

        alert("提交")

      }

    }
 

6、站点及模板数据（先使用静态数据）

在created钩子方法中定义，created是在html渲染之前执行，这里推荐使用created

created:function(){

      //初始化站点列表

      this.siteList = [

        {

          siteId:'5a751fab6abb5044e0d19ea1',

          siteName:'门户主站'

        },

        {

          siteId:'',

          siteName:'测试站'

        }

      ]

      //模板列表

      this.templateList = [

        {

          templateId:'5a962b52b00ffc514038faf7',

          templateName:'首页'

        },

        {

          templateId:'5a962bf8b00ffc514038fafa',

          templateName:'轮播图'

        }

      ]

    }
 

完整代码

<template>

  <div>

    <el-form :model="pageForm" label-width="80px" >

      <el-form-item label="所属站点" prop="siteId">

        <el-select v-model="pageForm.siteId" placeholder="请选择站点">

          <el-option

            v-for="item in siteList"

          :key="item.siteId"

          :label="item.siteName"

          :value="item.siteId">

          </el-option>

        </el-select>

      </el-form-item>

      <el-form-item label="页面名称" prop="pageName">

        <el-input v-model="pageForm.pageName" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="别名" prop="pageAliase">

        <el-input v-model="pageForm.pageAliase" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="访问路径" prop="pageWebPath">

        <el-input v-model="pageForm.pageWebPath" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="物理路径" prop="pagePhysicalPath">

        <el-input v-model="pageForm.pagePhysicalPath" auto-complete="off" ></el-input>

      </el-form-item>

      <el-form-item label="类型">

        <el-radio-group v-model="pageForm.pageType">

          <el-radio class="radio" label="">静态</el-radio>

          <el-radio class="radio" label="">动态</el-radio>

        </el-radio-group>

      </el-form-item>

      <el-form-item label="创建时间">

        <el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.pageCreateTime">

        </el-date-picker>

      </el-form-item>

    </el-form>

    <div slot="footer" class="dialog-footer">

      <el-button type="primary" @click="addSubmit" >提交</el-button>

    </div>

  </div>

</template>

<script>

  import * as cmsApi from '../api/cms'

  export default {

    data() {

      return {

        //站点列表

        siteList: [],

        //模版列表

        templateList: [],

        //新增界面数据

        pageForm: {

          siteId: '',

          templateId: '',

          pageName: '',

          pageAliase: '',

          pageWebPath: '',

          pageParameter: '',

          pagePhysicalPath: '',

          pageType: '',

          pageCreateTime: new Date()

        }

      }

    },

    methods:{

      addSubmit(){

        alert("提交")

      }

    },

    created:function(){

      //初始化站点列表

      this.siteList = [

        {

          siteId:'5a751fab6abb5044e0d19ea1',

          siteName:'门户主站'

        },

        {

          siteId:'',

          siteName:'测试站'

        }

      ]

      //模板列表

      this.templateList = [

        {

          templateId:'5a962b52b00ffc514038faf7',

          templateName:'首页'

        },

        {

          templateId:'5a962bf8b00ffc514038fafa',

          templateName:'轮播图'

        }

      ]

    }

  }

</script>

page_add.vue

最新文章

  1. 谁也无法挡住我访问Google---使用Nginx反向代理攻略
  2. 01 Linux档案与目录管理
  3. [css]我要用css画幅画(一)
  4. DRL之：策略梯度方法　（Policy Gradient Methods）
  5. Jmeter监控服务器性能
  6. 《JavaScript高级程序设计》心得笔记-----第三篇章
  7. Android开发—— Native 与 Web 之架构抉择
  8. qt QSqlQuery
  9. P1082丛林探险
  10. Keil C51 与 ARM 并存方法
  11. oracle逗号字符串拼接小工具
  12. Moq 和RhinoMocks
  13. automake/autoconf的简单例子
  14. 【mybatis深度历险系列】延迟加载
  15. Java的基本类型和包装类型
  16. react-redux的使用
  17. 在Ubuntu中使用JDB调试代码
  18. 深入理解Fsync
  19. KVM虚拟机网络闪断分析
  20. PHP中测试in_array、isset、array_key_exists性能

热门文章

  1. Nginx系列1.2：nginx-rtmp流媒体服务器添加权限认证（推流权限和播放权限）
  2. KubeEdge v0.2发布，全球首个K8S原生的边缘计算平台开放云端代码
  3. 迭代器 Iterator 是什么？（未完成）Iterator 怎么使用？（未完成）有什么特点？（未完成）
  4. java中的io流总结（二）——RandomAccessFile类
  5. 阿里云服务器搭建gitlab
  6. 2018年5月20日--西安icpc邀请赛试题一览
  7. vue2 父子组件数据更改
  8. 11 - Vue模板语法
  9. vue 想关工具 及组件
  10. springAop，注解annotation + redis 实现分布式锁