整体布局写完了,那么就可以写main这部分的局部布局了,一般在做后台系统的时候,大部分时候,在做一些数据展示的时候基本上都会使用table的方式去做应该数据的展示,以及各种操作。按钮也可以放在table里面去,头部会给一些搜索的逻辑,基于什么样的条件去做一个搜索。
搜索之后数据就会慢慢展示出来了,然后对每条数据进行什么样的操作。
在开发之前,先开发header,最后开发table。(也就是main里面的header)
下拉选择框 [el-select]
适用广泛的基础单选
常用属性
label其实展示的内容,value就是展示的内容选择了之后对应的值。v-model的值为当前被选中的el-option的 value 属性值
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕',},{value: '选项2',label: '双皮奶',},{value: '选项3',label: '蚵仔煎',},{value: '选项4',label: '龙须面',},{value: '选项5',label: '北京烤鸭',},],value: '',}},}
</script>
命名空间好了之后还需要一个搜索框,这个搜索框就是搜索deploy的名字的。会将搜索框中input的内容传给后端,然后让后端去进行一个查库,或者调用k8s的client-go调用的apiserver。
卡片在里面起到的作用其实就是加一个边框。