1、後臺傳入大賽標題介面，前端用axios請求介面並顯示，帶有引數的請求，請求到的主要有大賽標題和大賽id，用el-select el-opotion進行顯示，使用v-for時注意key標識不能丟。

<el-select v-model="value" plcaholder="請選擇" @visible-change="getInvestInfo">
    <el-option
            v-for="(table,index) in tables"
            :key="index"
            :label="table.title"
            :value="table.contest_id" >
    </el-option>
</el-select>

2、點選某個大賽名稱，列表顯示大賽資訊，並且列表分頁，後臺介面有大賽id，當前頁數，每頁顯示數量，請求到資訊並顯示，data中列表資料需要先定義，分頁時，當前頁數，每頁顯示數量均有觸發事件，並作為變數進行傳遞

<div class="page">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20,30,40,50,100,500,1000]"
            :page-size="pageSize"
            layout="prev, pager, next, sizes, total"
            :total="total">
    </el-pagination>
</div>

total: 1000,
pageSize: 20,
pageNum:1,

//觸發每頁顯示數量
handleSizeChange(val) {
    this.pageSize = val;
    this.onSubmit();
},
//觸發起始頁數變化
handleCurrentChange(val) {
    this.pageNum = val;
    this.onSubmit();
},

//大賽作品（列表請求）
onSubmit:function(){
    var params = new URLSearchParams();
    params.append('start', this.pageNum);       //你要傳給後臺的引數值 key/value
    //  params.append('start', "1");
    params.append('length', this.pageSize);
    params.append(' contestid', this.value);
    // params.append(' contestid',"13");
    let _this=this;
    this.$axios.post( '/apis/adm_contest_works/view',params).then(function(response) {
        console.log(response.status);
        if(response.status==200) {
            var data = response.data.data;
            //  console.log(data);
            _this.tableData = data;
            console.log(_this.tableData);
        }else{
            _this.tableData =[];
        }
    }, function(error) {
        console.error("失敗！");
        console.error(error);
    })
},

3、列表中有button按鈕，點選有彈出框，顯示作品詳細資訊

<el-table-column
        label="作品詳情"
       >
    <template slot-scope="scope">
        <el-button type="text" @click='editShow(scope.row,scope.$index)'>檢視作品</el-button>
    </template>

</el-table-column>

table之後加diolog

<el-dialog :title="editObj.title" v-model="dialogFormVisible" style="width:900px;">
 <!--   <div class="viewImg"><img src="editObj.image_url"/></div>-->
    <div style="float:left; margin-right:100px">
        <div>暱稱: {{editObj.nick}}</div>
        <div>出生年月：{{editObj.birthday}}</div>
        <div>性別：{{editObj.sex|toText}}</div>
    </div>
    <div style="float:left">
        <div>
            <span>加星</span>
            <el-switch
                    v-model="editObj.is_recommend"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
            </el-switch>
        </div>
        <div>
            <span>遮蔽</span>
            <el-switch
                    v-model="editObj.shield"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
            </el-switch>
        </div>
    </div>
</el-dialog>

data中定義ediobj物件

editObj:{
    title:'',
    image_url:'',
    nick:'',
    birthday:'',
    sex: {
        '1': '男',
        '2': '女'
    },
    is_recommend:'',
    shield:'',

}

method中：

  editShow(row,_index){
            this.editObj=row;
            this.listIndex=_index;
            this.dialogFormVisible=true;
}

4、後臺傳輸過來的數字怎麼轉換問文字

（1）el-table中如何轉 :formatter

<el-table-column
        prop="work_type"
        label="作品類別"
        width="100"
        :formatter = "stateFormat">
</el-table-column>

在method中處理

stateFormat(row, column) {
    //             console.log(row.work_type);
    switch(row.work_type){
        case "1":
            return '塗鴉';
            break;
        case "0":
            return '塗鴉';
            break;
        case "2":
            return 'K歌';
            break;
        case "3":
            return '配音';
            break;
        case "4":
            return '視訊上傳';
            break;
        default:
            return '未知';
    }
},

（2）diolog中div的後臺傳來數字如何轉化為文字

<div>性別：{{editObj.sex|toText}}</div>

在filter中：

filters: {
    toText(val) {
        switch (val) {
            case "1":
                return "男";
            case "2":
                return "女";
            default:
                return "";
        }
    }
    },