vue中element-ui表格组件el-table封装，在table表格中插入图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中element-ui表格组件el-table封装，在table表格中插入图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这次写的项目是写后台管理系统这部分，对于后台管理使用vue写，用组件的话，table组件用得次数比较多，可以封装一个table组件。

1.如封装的table组件：

<template>
  <el-table
    :data="tableData"
    height="400px"
    max-height="400px"
    size="small"
    row-class-name="row"
    cell-class-name="column"
    :highlight-current-row="true"
    fit
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column
      v-for="(item, index) in tableLabel"
      :key="index"
      :fixed="item.fixed"
      :prop="item.prop"
      :width="item.width"
      :label="item.label"
    >
      <template slot-scope="scope">
        <template v-if="item.arr">
          <el-button
            size="mini"
            :type="item2.type == 'delete' ? 'danger' : ''"
            v-for="item2 in item.arr"
            :key="item2.type"
            @click="handleClick(item2.type,scope.row,scope.$index)"
            >{{ item2.name }}</el-button
          >
        </template>
        <div v-else class="boxTa">{{ scope.row[item.prop] }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "UserTableCenter",
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
};
</script>

:prop="item.prop" :label="item.label"是必须要有的，其他的可以根据自己需要写。

2.封装之后是就是使用了：

首先先引用这个封装好的组件

import UserTableCenter from "../../../components/backendPages/contentCenter/userTableCenter.vue";

然后再使用这个组件在内容部分

<UserTableCenter :tableData="tableData" :tableLabel="tableLabel"  />

3.传入数据

data() {
    return {
      tableLabel: [
        { label: "订单号", width: "", prop: "orderNumber"},
        { label: "订单总价", width: "", prop: "orderPrice" },
        { label: "订单状态", width: "", prop: "orderState" },
        { label: "支付方式", width: "", prop: "orderType" },
        { label: "创建时间", width: "", prop: "orderTime" },
        {
          prop: "action",
          label: "操作",
          arr: [{ name: "查看" }, { type: "delete", name: "删除" }],
        },
      ],
      tableData: [
        {
          orderNumber: "中国男",
          orderPrice: "阳光超市",
          orderState: "男",
          orderType: 18383929383,
          orderTime: "华北",
        },
      ],
    };
  },
};

如下图就是完成的结果图

vue3 table插入图片,周记,其他

还有如果是商品图片的话，还要在表格中插入图片，插入图片的方式如下

 <el-table-column prop="image" label="商品图片" width="120">
        <template slot-scope="scope">
          <el-image :src="scope.row.image" style="width:80px;height:50px" :preview-src-list="[scope.row.image]">
            <div slot="error" class="image-slot">
               
            </div>
          </el-image>
        </template>
    </el-table-column>

:src="scope.row.image" :preview-src-list="[scope.row.image]"row后面参数是返回的数据的类型文章来源地址https://www.toymoban.com/news/detail-550375.html

    tableData: [
        {
          date: "2016-05-03",
          introduction: "王小虎上海市普陀区金沙江路 1518 弄",
          image: require('../../../../public/imgaes/10861.jpg'),//这里要用require包含图片的地址
          number: "900",
          tag: "已上架",
          price: "800",
          time: "上海市普陀区金沙江路 1518 弄",
        },
]

到了这里，关于vue中element-ui表格组件el-table封装，在table表格中插入图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！