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

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

        1.如封装的table组件：

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

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

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

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

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

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: "华北",
        },
      ],
    };
  },
};

如下图就是完成的结果图 

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

:src="scope.row.image" :preview-src-list="[scope.row.image]"row后面参数是返回的数据的类型

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