element-ui後臺管理系統學習(10)-表格自定義模版與tabs標籤頁的使用

element-ui中封裝了表格組件，方便進行數據展示，除了基本的數據展示外，單元格內可能需要一些佈局，這個時候我們就是需要使用自定義模版來實現功能，數據的配置如下：

表頭的配置及自定義模版配置如下：

<!-- 表格數據 -->
<el-table border class="mt-3" :data="tableData[tabI].list" style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="45" align="center"></el-table-column>
    <el-table-column label="商品" width="380">
    <template slot-scope="scope">
        <div class="media">
        <img class="mr-3" :src="scope.row.cover" style="width:60px;height:60px;">
        <div class="media-body">
            <p class="mt-0 mb-0">{{scope.row.title}}</p>
            <p class="mb-0">分類：{{scope.row.category}}</p>
            <p class="mb-0">時間：{{scope.row.create_time}}</p>
        </div>
        </div>
    </template>
    </el-table-column>
    <el-table-column prop="type" label="商品類型" align="center"></el-table-column>
    <el-table-column prop="sale_count" label="實際銷量" align="center"></el-table-column>
    <el-table-column prop="order" label="商品排序" align="center">
    </el-table-column>
    <el-table-column prop="status" label="商品狀態" align="center">
    <template slot-scope="scope">
        <el-button plain :type="scope.row.status ===1?'success':'warning'" size="mini">
        {{scope.row.status ===1?'上架':'下架'}}</el-button>
    </template>
    </el-table-column>
    <el-table-column prop="stock" label="總庫存" align="center"></el-table-column>
    <el-table-column prop="pprice" label="價格" align="center"></el-table-column>
    <el-table-column label="操作" width="150" align="center">
    <template slot-scope="scope">
        <el-button-group>
        <el-button type="primary" size="mini" plain>修改</el-button>
        <el-button type="danger" size="mini" plain @click="deleteItem(scope.$index)">刪除</el-button>
        </el-button-group>
    </template>
    </el-table-column>
</el-table>

表格部分：

其中，prop就是表格的表頭，在不需要自定義模版的時候，使用prop即可。但是在需要使用自定義模版的時候，需要template配置，slot-scope=‘scope’，其中scope.row表示當前行的對象，scope.$index 表示當前行的索引，方便對當前行進行刪除等操作。

tabs標籤頁部分：

該例中tabs標籤頁配合表格使用，在不同的標籤頁對應不同的表格數據。所以，標籤頁的索引，應該與表格的數據一一對應，數據的結果如下：

  __getData() {
      for (let i = 0; i < this.tabbars.length; i++) {
        this.tableData.push({
          currentPage: 1,
          list: []
        });
        for (let j = 0; j < 20; j++) {
          this.tableData[i].list.push({
            id: i,
            title: "蘋果手機" + i + "-" + j,
            type: "普通商品",
            cover:
              "http://p0.meituan.net/wedding/155377ad7bdf4040dbf85d00c329cd08156366.jpg%40watermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20",
            categoty: "手機",
            create_time: "2019-01-01 12:11:11",
            sale_count: 20,
            order: 100,
            status: 1,
            stock: 20,
            pprice: 1000,
            ischeck: 1
          });
        }
      }
    },

完整代碼：

<template>
  <div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom:0!important;">

    <el-tabs v-model="tabIndex" @tab-click="handleClick">
      <el-tab-pane :label="tab.name" :key="tabI" v-for="(tab,tabI) in tabbars">
        <button-search ref="buttonSearch" placeholder="要搜索的商品名稱" @search="searchEvent">
          <!-- 左邊 -->
          <template #left>
            <el-button type="success" size="mini">發佈商品</el-button>
            <el-button type="danger" size="mini">批量刪除</el-button>
            <el-button type="warning" size="mini">恢復商品</el-button>
            <el-button size="mini">上架</el-button>
            <el-button size="mini">下架</el-button>
            <el-button size="mini">推薦</el-button>
          </template>
          <!-- 高級搜索表單 -->
          <template #form>
            <el-form inline ref="form" :model="form" label-width="80px">
              <el-form-item label="商品名稱" class="mb-0">
                <el-input v-model="form.name" placeholder="商品名稱" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="商品編碼" class="mb-0">
                <el-input v-model="form.code" placeholder="商品編碼" size="mini"></el-input>
              </el-form-item>
              <el-form-item label="商品類型" class="mb-0">
                <el-select v-model="form.type" size="mini" placeholder="請選擇商品類型">
                  <el-option label="區域一" value="shanghai"></el-option>
                  <el-option label="區域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品分類" class="mb-0">
                <el-input v-model="form.category" placeholder="商品分類" size="mini"></el-input>
              </el-form-item>
              <el-form-item class="mb-0">
                <el-button type="info" size="mini" @click="searchEvent">搜索</el-button>
                <el-button size="mini" @click="clearSearch">清空篩選條件</el-button>
              </el-form-item>
            </el-form>
          </template>
        </button-search>

        <!-- 表格數據 -->
        <el-table border class="mt-3" :data="tableData[tabI].list" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="45" align="center"></el-table-column>
          <el-table-column label="商品" width="380">
            <template slot-scope="scope">
              <div class="media">
                <img class="mr-3" :src="scope.row.cover" style="width:60px;height:60px;">
                <div class="media-body">
                  <p class="mt-0 mb-0">{{scope.row.title}}</p>
                  <p class="mb-0">分類：{{scope.row.category}}</p>
                  <p class="mb-0">時間：{{scope.row.create_time}}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="商品類型" align="center"></el-table-column>
          <el-table-column prop="sale_count" label="實際銷量" align="center"></el-table-column>
          <el-table-column prop="order" label="商品排序" align="center">
          </el-table-column>
          <el-table-column prop="status" label="商品狀態" align="center">
            <template slot-scope="scope">
              <el-button plain :type="scope.row.status ===1?'success':'warning'" size="mini">
                {{scope.row.status ===1?'上架':'下架'}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="總庫存" align="center"></el-table-column>
          <el-table-column prop="pprice" label="價格" align="center"></el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" size="mini" plain>修改</el-button>
                <el-button type="danger" size="mini" plain @click="deleteItem(scope.$index)">刪除</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import buttonSearch from "@/components/common/button-search.vue";
export default {
  components: {
    buttonSearch
  },
  data() {
    return {
      multipleSelection: [],
      tableData: [],
      tabIndex: 0,
      tabbars: [
        { name: "審覈中" },
        { name: "出售中" },
        { name: "已下架" },
        { name: "庫存預警" },
        { name: "回收站" }
      ],
      form: {
        name: "",
        code: "",
        type: "",
        category: ""
      }
    };
  },
  created() {
    this.__getData();
  },
  methods: {
    //   生成數據
    __getData() {
      for (let i = 0; i < this.tabbars.length; i++) {
        this.tableData.push({
          currentPage: 1,
          list: []
        });
        for (let j = 0; j < 20; j++) {
          this.tableData[i].list.push({
            id: i,
            title: "蘋果手機" + i + "-" + j,
            type: "普通商品",
            cover:
              "http://p0.meituan.net/wedding/155377ad7bdf4040dbf85d00c329cd08156366.jpg%40watermark%3D1%26%26r%3D1%26p%3D9%26x%3D2%26y%3D2%26relative%3D1%26o%3D20",
            categoty: "手機",
            create_time: "2019-01-01 12:11:11",
            sale_count: 20,
            order: 100,
            status: 1,
            stock: 20,
            pprice: 1000,
            ischeck: 1
          });
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 加載數據
    handleClick(tab, event) {
      console.log(tab.index);
    },
    // 清空篩選條件
    clearSearch() {
      this.form = {
        name: "",
        code: "",
        type: "",
        category: ""
      };
      this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
    },
    // 搜索事件
    searchEvent(e = false) {
      // 簡單搜索
      if (typeof e === "string") {
        return console.log("簡單搜索", e);
      }
      // 高級搜索
      console.log("高級搜索");
    },
    // 刪除商品
    deleteItem(index) {
      this.$confirm("是否刪除該商品?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.tableData[this.tabIndex].list.splice(index, 1);
        this.$message({
          type: "success",
          message: "刪除成功!"
        });
      });
    }
  }
};
</script>

<style>
</style>