工作台卡片v-for列表

weixin_48348089

已于 2022-08-22 09:18:25 修改

阅读量355

点赞数

分类专栏： vue 文章标签： vue.js elementui javascript

于 2022-08-18 17:42:56 首次发布

本文链接：https://blog.csdn.net/weixin_48348089/article/details/126410652

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这是一个展示工作台界面的博客，主要分为待审核和已完成两个部分。待审核区域显示了多个项目和任务，每个任务都有项目标题和分配标题，并提供了审核按钮。已完成区域则展示了已审核的任务，标记了审批结果，包括同意和拒绝两种状态。

摘要由CSDN通过智能技术生成

 <el-card shadow="hover" style="height:calc(100vh - 360px);">
          <div slot="header" style=" display: flex;justify-content: space-between;align-items: center;">
            <span style=" font-weight: bold; color: #1e9fff; padding: 15px 0;">工作台</span>
            <el-button style="float: right; padding: 3px 0; color: #cf9236;font-size: 20px" class="el-icon-s-platform"
                       type="text" @click="gotolink"></el-button>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick " stretch>
            <el-tab-pane name="tabs0"><span slot="label">待审核<el-badge :value="num.tab1"></el-badge></span>
              <div v-for="(item,index) in showList.filter(m=>m.status==0)" style="width: 100%;clear: both;padding:  10px 0">
                <el-tooltip  effect="dark" :content="item.projectTitle" placement="top-start">
                  <el-tag class="tagClass" size="small" :key="item.projectTitle">{{item.projectTitle}}</el-tag>
                </el-tooltip>
                <div class="linkClass">
                  <el-tooltip  effect="dark" :content="item.assignmentTitle" placement="top-start">
                    <el-link :underline="false" class="link"  @click="showassignmentDetail(item)">
                      <div>{{ item.assignmentTitle}}</div>
                    </el-link>
                  </el-tooltip>
                </div>
                <el-button style="float: right;padding: 5px"  type="text" @click="openEdit(item,index)">
                  审核
                </el-button>
              </div>
            </el-tab-pane>
========================================================================================
            <el-tab-pane name="tabs1"><span slot="label">已完成<el-badge :value="num.tab2"></el-badge></span>

              <div v-for="(item,index) in showList.filter(m=>m.status==1)" style="width: 100%;clear: both;padding:  10px 0">
-----------------------------------------------------------------
                <el-tooltip  effect="dark" :content="item.projectTitle" placement="top-start">
                  <el-tag class="tagClass" size="small" :key="item.projectTitle">{{item.projectTitle}}</el-tag>
                </el-tooltip>
---------------------------------------------------------------------
                <div class="linkClass">
                  <el-tooltip  effect="dark" :content="item.assignmentTitle" placement="top-start">
                    <el-link :underline="false" class="link"  @click="showassignmentDetail(item)">
                      <div>{{ item.assignmentTitle}}</div>
                    </el-link>
                  </el-tooltip>
                </div>
------------------------------------------------------------------------
                <span  :class="[item.approvalResult=='0'?'green':'red']" style="float: right;padding: 5px;font-size: 13px" >
                  {{ item.approvalResult==0?'同意':'拒绝'}}
                </span>

              </div>
            </el-tab-pane>
          </el-tabs>
          <div>

          </div>








.tagClass {
  float: left;
  margin:0 0 0 10px;
  width: 80px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  text-align: center;
}

.linkClass {
  float: left;
  margin:0 0 0 10px;
  max-width: 320px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}