el-table 表格 业务标配模板；

一 、业务标配常用模板

预设内容：

1. 勾选列；
2. 固定列 right ;
3. 行内图片单元格；带预览功能;
4. 自定义表头颜色；
5. 分页; pagination
6. 嵌套在 dialog 弹出层内;

---

样板效果预览：

1.1 HTML

HTML:
table 模板
嵌套 dialog 内：

 <el-dialog v-model="tableVisible" title="商品日志" width="70%">
      <div class="tableAndPagination">
          <!-- 用于在setup()内替代this.$refs['refTable'] 方案-->
      	<!-- ref="refTable",前面不加冒号【:ref=错】，直接赋值refTable,名称与setup()中return的名称一致 -->
        <el-table
          class="infoTable"
          ref="refTable"
          :data="tableData"
          v-loading="loadding"
          stripe
          :header-cell-style="tableHeaderStyle"
          @selection-change="handleSelectionChange"
          style="width: 100%; height: 100%"
        >
          <!-- 复选框列 -->
          <el-table-column type="selection" width="55" />
          <!-- 内容列 -->
          <el-table-column
            prop="type"
            v-for="(item, index) in tableKeys"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
          >
            <template #default="scope">
              <el-image
                class="columnImage"
                v-if="item.key === 'name'"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcnstatic01.e.vhall.com%2Fupload%2Fwebinars%2Fimg_url%2F74%2F38%2F74381cb6027598e0e6c92691ff9328d4.jpeg&refer=http%3A%2F%2Fcnstatic01.e.vhall.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637114658&t=07751a895029e3ccb2985bfc579b8f54"
                :preview-src-list="[
                  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcnstatic01.e.vhall.com%2Fupload%2Fwebinars%2Fimg_url%2F74%2F38%2F74381cb6027598e0e6c92691ff9328d4.jpeg&refer=http%3A%2F%2Fcnstatic01.e.vhall.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637114658&t=07751a895029e3ccb2985bfc579b8f54',
                ]"
              />
              <span v-else>{{ filters(item.key, scope.row[item.key]) }}</span>
            </template>
          </el-table-column>
          <!-- 操作列 -->
          <el-table-column fixed="right" label="操作" width="180">
            <template #default>
              <el-button type="success" size="small" plain>Success</el-button
              ><el-button type="danger" size="small" plain>Danger</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationStyle">
        <el-pagination
          background
          layout="prev, pager, next"
          v-model:currentPage="query.page"
          :page-size="query.limit"
          @current-change="handleCurrentChange"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-dialog>

1.2 vue.js setup()函数

vue.js
引入所需模块

// 返回Promise对象的异步数据接口:getCommodityLog
import { getCommodityLog } from "@/api/commodityManagement.js";
import { reactive, toRefs, nextTick, ref } from "vue";
import { ElNotification } from "element-plus";

setup()函数

 setup() {
    const dateState = reactive({
      query: {
        page: 1,
        limit: 10,
      },
      multipleSelection: [],
      // HTML中绑定的ref 属性;
      refTable: null,
      tableVisible: true,
      tableData: [],
      tableKeys: [
        { label: "日志类型", key: "type", minWidth: "100%" },
        { label: "商品名称", key: "name", minWidth: "100%" },
        { label: "条形码", key: "code", minWidth: "100%" },
        { label: "单位", key: "unit", minWidth: "100%" },
        { label: "库存", key: "orignNum", minWidth: "100%" },
        { label: "变更后库存变更后", key: "curnum", minWidth: "100%" },
        { label: "备注", key: "remark", minWidth: "100%" },
        { label: "操作日期", key: "registerDate", minWidth: "100%" },
        { label: "操作人", key: "operator", minWidth: "100%" },
      ],
      total: 0,
      loadding: false,
      handleSelectionChange(val) {
        // val 已选中row作为元素的数组;
        dateState.multipleSelection = val;
      },
      // 模拟过滤器；此处不采用Element-plus内置的列formatter属性格式化数据;
      filters(key, value) {
        if (key === "type") {
          switch (value) {
            case "add":
              return "新增";
            default:
              return value || "--";
          }
        } else if (key === "name") {
          switch (value) {
            case "add":
              return "新增";
            default:
              return value || "--";
          }
        } else {
          return value;
        }
      },
      handleCurrentChange(value) {
        dateState.query.page = value;
        dateState.GET_INFO();
      },
      tableHeaderStyle() {
        return {
          background: "#666",
        };
      },
      async GET_INFO() {
        dateState.loadding = true;
        try {
          const {
            data: res,
            status: code,
            message,
          } = await getCommodityLog(dateState.query);
          if (code == 200) {
            dateState.tableData = res.rows;
            dateState.total = res.total;
            dateState.loadding = false;
            await nextTick();
          } else {
            ElNotification({
              title: "错误 " + code,
              message: message,
              type: "error",
            });
          }
        } catch ({ message }) {
          ElNotification({
            title: "请联系管理员",
            message: message,
            type: "error",
          });
        }
      },
    });
    return {
      ...toRefs(dateState),
    };
  },

1.3 CSS

css部分：

/* table内容区域滚动,表头不动 */
:deep() .tableAndPagination .infoTable .el-table__body-wrapper {
  height: 300px;
  overflow-y: scroll;
}
/* 表头 字体颜色 */
:deep() .infoTable .el-table__header .cell {
  color: #fff;
}
/* 单元格居中, 字体大小 */
:deep() .el-table .cell {
  text-align: center;
  font-size: 14px;
}
/* 单元格居中, 字体大小 */
:deep() .el-table .cell .columnImage img {
  width: 100%;
  height: 100%;
}
/* 图片单元格样式 */
:deep() .el-table .cell .columnImage {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 分页 */
.paginationStyle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 30px;
}
/* pagination数字颜色 */
:deep() .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #008454 !important;
  color: red;
}
/* pagination小格子背景颜色 */
:deep() .el-pagination.is-background .el-pager li:not(.disabled) {
  color: green;
}