当前位置: 首页 > article >正文

记录vue+elementUI table的组件

 可展示图片,

可使用slot插槽添加逻辑,

循环表cloumn,

循环添加操作配置actionButtons

    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="selectChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :width="item.width"
        :fixed="item.fixed"
        :type="item.type"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable"
        :align="item.align || 'center'"
      >
        <template v-slot="scope">
          <!-- 如果是索引列,显示行号 -->
          <span v-if="item.type === 'index'">{{ scope.$index + 1 }}</span>

          <!-- 如果是图片列,展示图片 -->
          <span v-else-if="item.prop === 'fileThumb'">
            <img
              v-if="scope.row[item.prop]"
              :src="scope.row[item.prop]"
              alt="图片"
              style="width: 50px; height: 50px; object-fit: cover"
            />
            <!-- <img v-else :src="
            " alt=""> -->
          </span>

          <!-- 其他列使用自定义插槽或者默认值 -->
          <slot
            v-else
            :name="item.prop"
            :scope="scope.row"
            :index="scope.$index"
          >
            <span>
              {{ item.slot ? item.slot(scope.row) : scope.row[item.prop] }}
            </span>
          </slot>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="200">
        <template v-slot="scope">
          <el-button
            v-for="(btn, index) in actionButtons"
            :key="index"
            :type="btn.type"
            :size="btn.size"
            @click="btn.action(scope.row)"
          >
            {{ btn.label }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

 大致使用:

使用    /
/ 表格cloumn
      tableColumn: [
        { type: "index", label: "序号", fixed: "left" },
        {
          prop: "sourceName",
          label: "素材名称",
          fixed: "left",
        },
        {
          label: "缩略图",
          prop: "fileThumb",
        },
        {
          prop: "createTime",
          label: "创建时间",
        },
        {
          prop: "updateBy",
          label: "删除人",
        },
        {
          prop: "updateTime",
          label: "删除时间",
        },
        {
          prop: "sourceType",
          label: "素材格式",
          slot: (row) => {
            const stage = this.dict.type.resource_type;
            if (stage.length > 0) {
              const result = stage.find((item) => item.value == row.sourceType);
              return result?.label;
            }
          },
        },
        {
          prop: "sourceSubject",
          label: "专题分类",
          slot: (row) => {
            const stage = this.dict.type.resource_subject;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourceSubject
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourceGrade",
          label: "适用年级",
          slot: (row) => {
            const stage = this.dict.type.resource_garde;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourceGrade
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourcePlatform",
          label: "适用平台",
          slot: (row) => {
            const stage = this.dict.type.resource_platform;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourcePlatform
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourceScene",
          label: "适用场景",
          slot: (row) => {
            const stage = this.dict.type.resource_scene;
            if (stage.length > 0) {
              const result = stage.find(
                (item) => item.value == row.sourceScene
              );
              return result?.label;
            }
          },
        },
        {
          prop: "sourceLabel",
          label: "备注标签",
        },
      ],
      // 操作按钮配置
      actionButtons: [
        {
          label: "恢复",
          type: "text",
          size: "small",
          action: this.recovery,
        },
        {
          label: "清除",
          type: "text",
          size: "small",
          action: this.eliminate,
        },
      ],


http://www.kler.cn/a/449589.html

相关文章:

  • 《智启新材:人工智能重塑分子结构设计蓝图》
  • 突发!!!GitLab停止为中国大陆、港澳地区提供服务,60天内需迁移账号否则将被删除
  • 一个比RTK或redux更轻量级更易使用的 React 第三方状态管理工具库的配置与使用
  • CNN和Transfomer介绍
  • MySQL 8.0:explain analyze 分析 SQL 执行过程
  • layui动态拼接生成下拉框验证必填项失效问题
  • Android 系统源码 Bootable Recovery 目录下 Updater 技术架构详解
  • java 实现排序的几种方式
  • React Refs 完整使用指南
  • ansible的流程控制
  • 重温设计模式--观察者模式
  • postman读取文件执行
  • 模型并行分布式训练 Megatron (3) ---模型并行实现
  • 数仓开发那些事(8)
  • starter-data-mongodb
  • PostCSS插件——postcss-pxtorem结合动态调整rem实现字体自适应
  • 开源低代码平台-Microi吾码 打印引擎使用
  • JavaScript从基础到进阶的155个问题
  • VSCode 配置远程连接免密登录 插件
  • 使用 C# 从 Web 下载文件
  • 数据分析实战—IMDB电影数据分析
  • 单元测试mock框架Mockito
  • 如果安装FreeSWICH?
  • 梳理你的思路(从OOP到架构设计)_设计模式Composite模式
  • 支付测试 流程
  • WPSJS:让 WPS 办公与 JavaScript 完美联动