山东省建设工会网站,自己建网站花钱吗,属于网站建设过程规划和准备阶段的是,学计算机能做什么工作基础信息设置 在该页面添加一个大div#xff0c;然后添加一个tab选项卡#xff0c;Element UI里面有 把代码复制到大div里面#xff0c;把里面的label和name属性改成我们想要的#xff0c;再把tab-clickhandleClick去掉 divel-tabs v-modela…基础信息设置 在该页面添加一个大div然后添加一个tab选项卡Element UI里面有 把代码复制到大div里面把里面的label和name属性改成我们想要的再把tab-clickhandleClick去掉 divel-tabs v-modelactiveName el-tab-pane label部门管理 namefirst部门管理/el-tab-paneel-tab-pane label职位管理 namesecond职位管理/el-tab-paneel-tab-pane label职称管理 namethird职称管理/el-tab-paneel-tab-pane label奖惩规则 namefourth奖惩规则/el-tab-paneel-tab-pane label权限组 namefourth2权限组/el-tab-pane/el-tabs/div在data里面设置activeName属性activeName:‘second’默认显示第二个
export default {name: SysBasic,data(){return{activeName:second,}},效果如下图所示
一共有五个选项卡可不可以直接在每一个选项卡里面直接写html标签呢答案是可以的但是这样写的话就要写好久重复的没法管理这时我们可以想到通过组件化开发来节省资源。就是一个很复杂的页面我们可以拆分成很多个小页面在把很多小页面拼接成一个完整的页面。组件可以放到components文件夹里面来页面就要views文件夹中先把这5个组件定义好
再引入这5个组件在 import EcMarna from ../../components/sys/basic/EcMarnaimport JobLevelMarna from ../../components/sys/basic/JobLevelMarnaimport PermissMarna from ../../components/sys/basic/PermissMarnaimport PosMarna from ../../components/sys/basic/PosMarnaimport DemMarna from ../../components/sys/basic/DepMarna引入之后并不能直接使用还需要注册成组件组件有key和valuekey和value相同可以只写一个定义的组件想当于是自己定义的一个html标签 components:{DemMarna:DemMarna,PosMarna: PosMarna,PermissMarna:PermissMarna,JobLevelMarna:JobLevelMarna,EcMarna:EcMarna}把选项卡中的代码再修改一下 divel-tabs v-modelactiveName el-tab-pane label部门管理 namefirstEcMarna/EcMarna/el-tab-paneel-tab-pane label职位管理 namesecondPosMarna/PosMarna/el-tab-paneel-tab-pane label职称管理 namethirdJobLevelMarna/JobLevelMarna/el-tab-paneel-tab-pane label奖惩规则 namefourthEcMarna/EcMarna/el-tab-paneel-tab-pane label权限组 namefourth2PermissMarna/PermissMarna/el-tab-pane/el-tabs/div职位管理组件的编写
分析职位管理组件里面有个输入框有个添加按钮和一张表可以分为两个div el-inputsizesmallstylewidth: 300px;placeholder添加职位...prefix-iconel-icon-plusv-modelpos.name/el-inputv-model一会要添加的数据这个添加的数据可以从服务端看一下未来想以json的形式上传它就可以在data里面声明name默认为空字符 export default {name: DepMarna,data() {return {pos: {name: }}}}右边是一个蓝色的添加按钮 type“primary” 表示是蓝色的 icon“el-icon-plus”号的标记 sizesmall小号的
el-button typeprimary iconel-icon-plus sizesmall添加/el-button接下来就是添加职位下面的表格了Element UI也有很多表格模板的
!--:datatableDate 是data数据里面的tableData属性。表格里面显示的数据是json数组--
!--el-table-column:表格中的每一列--div classposManaMainel-table:datapositionsstripesizesmallborderstylewidth: 70%el-table-columnpropidlabel编号width55/el-table-columnel-table-columnpropnamelabel职位名称width120/el-table-columnel-table-columnpropcreateDatelabel创建时间/el-table-column/el-table
/div在script标签里面的代码如下 plsitions:[]从后端传递过来的json数据
export default {name: PosMarna,data(){return{pos:{name:},tableData: []}}}
