????????這次寫的項目是寫后臺管理系統(tǒng)這部分，對于后臺管理使用vue寫，用組件的話，table組件用得次數(shù)比較多，可以封裝一個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"是必須要有的，其他的可以根據(jù)自己需要寫。

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

首先先引用這個封裝好的組件

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

然后再使用這個組件在內容部分

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

3.傳入數(shù)據(jù)

data() {
    return {
      tableLabel: [
        { label: "訂單號", width: "", prop: "orderNumber"},
        { label: "訂單總價", width: "", prop: "orderPrice" },
        { label: "訂單狀態(tài)", width: "", prop: "orderState" },
        { label: "支付方式", width: "", prop: "orderType" },
        { label: "創(chuàng)建時間", width: "", prop: "orderTime" },
        {
          prop: "action",
          label: "操作",
          arr: [{ name: "查看" }, { type: "delete", name: "刪除" }],
        },
      ],
      tableData: [
        {
          orderNumber: "中國男",
          orderPrice: "陽光超市",
          orderState: "男",
          orderType: 18383929383,
          orderTime: "華北",
        },
      ],
    };
  },
};

如下圖就是完成的結果圖?

?還有如果是商品圖片的話，還要在表格中插入圖片，插入圖片的方式如下

 <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后面參數(shù)是返回的數(shù)據(jù)的類型文章來源地址http://www.zghlxwxcb.cn/news/detail-550375.html

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

到了這里，關于vue中element-ui表格組件el-table封裝，在table表格中插入圖片的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！