element-ui后台管理系统学习(10)-表格自定义模版与tabs标签页的使用

逃离我推掉我的手 2021-08-02 18:57 797阅读 0赞

element-ui中封装了表格组件，方便进行数据展示，除了基本的数据展示外，单元格内可能需要一些布局，这个时候我们就是需要使用自定义模版来实现功能，数据的配置如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

表头的配置及自定义模版配置如下：

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/5065b479c193492088d9f8ec4a7b81c1.png