冲刺二相较于冲刺一,还是有进步的。可能是因为全身心投入项目了,即使一个 bug 不会或者弄了很久,但基本当天的任务也都能完成。在全员的积极配合下,顺利的完成了冲刺二所有的任务。
在冲刺二里,我的任务是实现管理员界面对学科、阶段、项目的增删查改。其实增删查改功能的实现花不了多少时间,就是调个接口就能实现的事,但是我居然整整花了十天时间去完成这个功能!毫不意外,其中将近有一半多的时间在设计页面布局...最终我选择了用现成的 element Ui 组件库(但是页面看起来还是很平淡,噢,那一定不会是最终页面),真的很方便!来给大家分享几个~
(官网在这里:element)
一、Table 表格 + 后台数据 ——> 实现学科、阶段、项目的展示功能
1. 首先我们先在官网选择一个自己喜欢的样式,我选择这个👇
(当然样式的选择和你要实现的功能也有一定的关系,如果你只是数据的展示,不需要对数据进行编辑或删除,就可以找一个没有操作这一栏的样式,不然还要手动删哟)
2. 复制官网代码 + 修改
在代码里我们不难发现,展示的数据就是 tableData 的内容。所以我们把后台获取过来的数据赋值给 tableData 这个数组就可以了。
axios
.post(
`http://124.71.219.15:8083//management_system/subject/selectAllSubject`
)
.then((response) => {
// 如果请求成功就赋值
if (response.data.flag) {
this.tableData = response.data.data;
} else {
console.log('请求失败!')
}
})
这里需要注意两点:
1)搭配 forEach 遍历使用的时候可以通过 .concat 方法,将数组进行连接
2)如果获取过来的是对象,可以用 push 方法,将其添加到数组中,不能直接赋值
二、Cascader 级联选择器 + 后台数据 ——> 实现选择对应阶段或项目
1. 选择一款自己喜欢的样式(比如下面这款就是我想要的)
2. 复制代码 + 修改
其中 :options 后面的就是要展示的内容,是一个数组对象,:props 用于配置属性,比如我从后台获取过来的数据是这样的
很明显这里嵌套了三层,第一层是 subject 相关内容,第二层是 stageList,第三层是 projectList,所以,我们可以通过 props 来配置 children 是哪个数组,这样最终显示出来,第一级就是第一层的数据,第二级第三级等就是 children 指定的那个名字的数组。对应代码如下
<template>
<form-item label="关卡选择" prop="stageSelect">
<el-cascader
ref="myStage"
:options="stageOptions"
:props="stageProps"
:show-all-levels="false"
v-model="ruleForm.stageSelect"
name="stageOptions"
>
</el-cascader>
</form-item>
</template>
<script>
mounted() {
axios
.post(
`http://124.71.219.15:8083//management_system/subject/selectAllSubject`
)
.then((response) => {
if (response.data.flag) {
this.stageOptions = response.data.data;
} else {
alert("请求失败");
}
});
},
data(){
return {
//阶段选择
stageOptions: [],
//下拉列表props指定
stageProps: {
value: "stageId", // 这里指定数组对象中属性为 stageId 的属性值为 value
label: "name", // 数组对象中 name 对应的值就是要显示到页面上的内容
children: "stageList", // 代表下一级的内容
},
}
}
</script>
最终结果就是这样的
注意点:如果说我们还要显示下一层,且下一层的名字不叫 stageList 了,而是 projectList ,且 props 属性中的 children 只能配置一个,我这里就是用了一个投机取巧的办法,就是把获取过来的数组对象转换成字符串,再把里面 projectList 替换成 stageList ,再赋值给 stageOptions 即可
if (response.data.flag) {
var array = response.data.data;
//把 array 中名为custompassList替换为stageList,为了练级器能显示
array = JSON.parse(JSON.stringify(array).replace(/customspassList/g, 'stageList'))
this.stageOptions = array;
以上就是本冲刺我觉得比较有收获的。再接再厉!