20.職稱管理前端頁面設計

輸入框和下拉框的制作

<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>
           

效果圖