Vue实战篇二十三：卡片风格与列表风格的切换

彦菘

已于 2024-06-04 11:40:44 修改

阅读量150

点赞数

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

于 2022-09-20 15:00:03 首次发布

本文链接：https://blog.csdn.net/qq_22905801/article/details/126953481

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

 <!-- 如果cardType为true,则显示卡片风格 -->
    <el-row v-if="cardType">
      <el-col
        v-for="item in roles"
        :key="item.id"
        :span="5"
        style="margin-bottom: 10px"
        :offset="1"
      >
        <el-card>
          <div slot="header" class="clearfix">
            <i class="el-icon-user" /><span style="margin-left: 5px">{{
              item.roleName
            }}</span>
            <div
              style="display: inline-block; float: right; cursor: pointer"
              @click="doEdit(item.id)"
            >
              <el-tooltip effect="dark" content="编辑角色" placement="top">
                <i class="el-icon-edit-outline" style="margin-left: 15px" />
              </el-tooltip>
            </div>
          </div>
          <div>
            <ul class="role-info">
              <li>
                <div class="role-left">描述信息：{{ item.description }}</div>
              </li>
              <li>
                <div class="role-left">
                  创建时间：{{ parseTime(item.createTime) }}
                </div>
              </li>
            </ul>
          </div>
          <div
            style="display: inline-block; float: left; cursor: pointer"
            @click="doAssignPemission(item.id, item.roleName)"
          >
            <el-tooltip effect="dark" content="权限分配" placement="bottom">
              <i class="el-icon-menu" />
            </el-tooltip>
          </div>
          <div
            style="display: inline-block; float: right; cursor: pointer"
            @click="doDelete(item.id)"
          >
            <el-tooltip effect="dark" content="删除角色" placement="bottom">
              <i class="el-icon-delete" style="margin-left: 15px" />
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 如果cardType为false则显示列表风格 -->
    <el-table
      v-else
      ref="table"
      :data="roles"
      style="width: 100%; font-size: 12px"
      @selection-change="selectionChangeHandler"
    >
      <el-table-column
        :show-overflow-tooltip="true"
        width="150"
        prop="roleName"
        label="角色名称"
      />

      <el-table-column
        :show-overflow-tooltip="true"
        prop="createTime"
        width="155"
        label="创建时间"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述信息" />
      <el-table-column label="操作" width="300" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            round
            @click="doEdit(scope.row.id)"
          >编辑角色</el-button>
          <el-button
            size="mini"
            type="text"
            round
            @click="doDelete(scope.row.id)"
          >删除角色</el-button>
          <el-button
            size="mini"
            type="text"
            round
            @click="doAssignPemission(scope.row.id,scope.row.roleName)"
          >分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>