zoukankan      html  css  js  c++  java
  • vue

    下拉框的 实现:

    查询区域 

            <el-form-item label="作业类型" style=" 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
  • 相关阅读:
    [原]C++ double 小数精度控制
    C++ double 小数精度控制
    从微软小冰看微软运营手段的转型
    Windows下搭建FTP服务器
    C++ 下使用curl 获取ftp文件
    解决MSF更新证书错误
    mimikaz获取明文密码
    metasploit5配置数据库
    Cobalt Strike几种不常见的上线方式
    Powershell
  • 原文地址:https://www.cnblogs.com/z360519549/p/13516950.html
Copyright © 2011-2022 走看看