elementPluse table常用代码片段

綒华

于 2024-01-24 16:10:54 发布

阅读量354

点赞数 9

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_66921738/article/details/135825062

版权

文章描述了一个使用Vue.js库ElementUI构建的表格，展示内容社区平台上的用户发帖操作，包括平台、发送账号、内容、时间以及发帖结果状态。

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

<template>
 <el-table
      :data="resultData"
      class="mt-20px"
      height="500"
      v-loading="loading"
      ref="multipleTableRef"
      @sort-change="sortChange"
    >
      <el-table-column prop="platform" label="平台" min-width="40" />
      <el-table-column prop="users" label="发送账号" min-width="80">
        <template #default="scope">
          <div class="flex items-center cursor-pointer">
            <img
              :src="getImageUrl(scope.row.platform, scope.row.uid)"
              @error="
                (e: any) => {
                  e.target.src = defaultImage
                }
              "
              class="w-8 h-8 rounded-full mr-2"
            />
            <div>
              <div class="text-sm text-[var(--app-text-color-primary)]">{{
                scope.row.user_name || scope.row.users
              }}</div>
              <div class="text-xs text-[var(--app-text-color-primary-ligher)] mt-1"
                >账号ID: {{ scope.row.sid }}</div
              >
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="info" label="发帖内容" min-width="180">
        <template #default="scope">
          <el-link type="primary" :underline="false" @click="viewMedium(scope.row)"
            ><div class="texts-ellipsis">{{ scope.row.info }}</div></el-link
          >
        </template>
      </el-table-column>

      <el-table-column prop="time" label="操作时间" sortable="custom" />
      <el-table-column prop="time1" label="完成时间" />
      <el-table-column prop="result" label="发帖结果">
        <template #default="scope">
          <div class="flex items-center text-[var(--app-text-left-border-color)]">
            <el-icon v-if="scope.row.result == 1" :color="'#52c41a'" :size="18">
              <CircleCheckFilled />
            </el-icon>
            <el-icon v-if="scope.row.result == 2" :color="'#909399'" :size="18">
              <WarningFilled />
            </el-icon>
            <span class="cursor-pointer" v-if="scope.row.result == 1" @click="view(scope.row)"
              >发送成功,查看结果</span
            >
            <span class="text-[#909399]" v-if="scope.row.result == 2">发送失败</span>
            <span class="text-[black]" v-if="scope.row.result !== 1 && scope.row.result !== 2"
              >发送中</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
</template>