輸入框和下拉框的制作
<div>
<el-input size="small" v-model="jl.name" style="width: 300px" prefix-icon="el-icon-plus" placeholder="添加職稱..."></el-input>
<el-select v-model="jl.titleLevel" placeholder="職稱等級" size="small" style="margin-left: 5px;margin-right: 5px">
<el-option
v-for="item in titleLevels"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-button icon="el-icon-plus" type="primary" size="small">添加</el-button>
</div>
el-input size=“small” v-model=“jl.name” style=“width: 300px” prefix-icon=“el-icon-plus” placeholder=“添加職稱…”
建立一個輸入框
size使用統一small格式
資料綁定name友善後續傳值給輸入框
prefix-icon="el-icon-plus" 加号
el-select v-model=“jl.titleLevel” placeholder=“職稱等級” size=“small” style="margin-left: 5px;margin-right: 5px"
建立一個下拉選擇框
綁定datatitleLevel
灰色字職稱等級
統一使用small格式
style調整空間位置
以下是通過一個資料源,填充可選項
el-option
v-for="item in titleLevels"
:key="item"
:label="item"
:value="item">
</el-option
data(){
return{
jls:[],
jl:{
name:'',
titleLevel:''
},
titleLevels:[
'正進階',
'副進階',
'中級',
'初級',
'員級'
]
}
}
表單
<div style="margin-top: 10px">
<el-table
:data="jls"
size="small"
border
style="width: 80%">
<el-table-column
prop="id"
label="編号"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="職稱名稱"
width="150">
</el-table-column>
<el-table-column
prop="titleLevel"
label="職稱級别">
</el-table-column>
<el-table-column
prop="createDate"
label="建立時間">
</el-table-column>
<el-table-column
laber="操作"
label="建立時間">
<template slot-scope="scope">
<el-button size="small">編輯</el-button>
// 統一small的size type是紅色的危險按鈕。
<el-button size="small" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
完整代碼
<template>
<div>
<div>
<el-input size="small" v-model="jl.name" style="width: 300px" prefix-icon="el-icon-plus" placeholder="添加職稱..."></el-input>
<el-select v-model="jl.titleLevel" placeholder="職稱等級" size="small" style="margin-left: 5px;margin-right: 5px">
<el-option
v-for="item in titleLevels"
:key="item"
:label="item"
:value="item">
</el-option>
</el-select>
<el-button icon="el-icon-plus" type="primary" size="small">添加</el-button>
</div>
<div style="margin-top: 10px">
<el-table
:data="jls"
size="small"
border
style="width: 80%">
<el-table-column
prop="id"
label="編号"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="職稱名稱"
width="150">
</el-table-column>
<el-table-column
prop="titleLevel"
label="職稱級别">
</el-table-column>
<el-table-column
prop="createDate"
label="建立時間">
</el-table-column>
<el-table-column
laber="操作"
label="建立時間">
<template slot-scope="scope">
<el-button size="small">編輯</el-button>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: "JobLevelMana",
data(){
return{
jls:[],
jl:{
name:'',
titleLevel:''
},
titleLevels:[
'正進階',
'副進階',
'中級',
'初級',
'員級'
]
}
}
}
</script>
<style scoped>
</style>