vue

 

 

 

 

 

下拉框的 实现：

查询区域 

        <el-form-item label="作业类型" style="width: 180px">
          <el-select v-model="search.homeworkType">
            <el-option v-for="item in homeworkTypes" :value="item.id" :label="item.name" :key="item.id" />
          </el-select>
        </el-form-item>

import {homeworkTypes,schoolLevel} from "@/utils/constants";

     search:{
          subject:'',
          grade:'',
          versionCode:'',
          homeworkType:'',
          school:'',
          keyword:'',
     },
     inputId:'',
     homeworkTypes: homeworkTypes(),

 data 中的 homeworkTypes 就是 模板中的 homeworkTypes （红色字体）。

蓝色字体的 homeworkTypes 是指  constants.js 中的方法：

export function  homeworkTypes(){

  return [

    { id: "1", name: "快速布置" },

    { id: "2", name: "教辅同步" },

    { id: "3", name: "资源精选" },

  ];

}

 

 

二： 查询结果表格中的作业类型：

    <el-table-column prop="homeworkType" label="作业类型" align="center"  >

       <template slot-scope="scope">

          {{scope.row.homeworkType | templateTaskType}}

        </template>

     </el-table-column>

 

在 util/format.js 中：

filters.push({
  name: 'templateTaskType',
  method: (code) => {  //时间戳转换
    let taskType = {
      "1": "精选资源",
      "2": "教辅同步",
    }
    return taskType[code];
  }
});

 

 三： vue 后台表格展示图片：

　　　　　　<el-table-column prop="pictureUrl" label="图片" align="center" width="160" >
            <template slot-scope="scope">
                <el-popover trigger="click" placement="bottom">
                  <img :src="scope.row.pictureUrl" slot="reference" min-width="50"
                  height="50">
                  <img
                  :src="scope.row.pictureUrl"
                />
              </el-popover>
              </template>
          </el-table-column>

 

四： 时间戳 转化成时间格式：比如  scope.row.createTime 是 1597748145 ， 

 <span>{{scope.row.createTime ? new Date(scope.row.createTime*1000).toLocaleString() : '-'}}</span>     显示的是 ： 2020/8/18 下午6:55:45