element-ui後臺管理系統學習(7)-列表組件抽離

頁面中的列表組件抽離，例如：將頁面中循環的li標籤，處理成組件，方便管理與維護，具體的相關代碼如下：

album-item子組件

<template>
    <li class="list-group-item list-group-item-action d-flex align-items-center" style="cursor:pointer;"
       @click.stop="$emit('change', index)"
      :class="{'active sum-active':active}">
      {{item.name}}
      <el-dropdown class="ml-auto">
        <span class="btn btn-light btn-sm border">
          {{item.num}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.stop.native="$emit('edit', {item, index})">修改</el-dropdown-item>
          <el-dropdown-item @click.stop.native="$emit('del', index)">刪除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </li>
</template>
<script>
export default {
    props:{
        active:{
            type:Boolean,
            default:false
        },
        item:Object,
        index:Number
    },
    methods:{
        
    }
};
</script>
<style >
</style>

父組件index.vue中引入

            <album-item v-for="(item, index) in albums" :key="index" :item="item" :index="index"
              :active="albumIndex === index" @change="albumChange" @edit="openAlbumModel" @del="albumDel"></album-item>

注意：在使用子組件向父組件傳值的時候，我們可以在子組件使用方法$emit('自定義事件名', 傳遞的參數)，然後在父組件中引入的時候@change=‘albumChange’進行事件綁定即可。

// 常規寫法
albumChange(index){
    this.$emit('change', index)
}

// 優化寫法  直接在html中使用$emit('change', index)

文件對比：

index.vue(抽離前)

<template>
  <div>
    <el-container style="position:absolute;top:55px;bottom:0;left:0;right:0;">
      <el-header class="d-flex align-items-center border-bottom">
        <div class="d-flex mr-auto">
          <el-select v-model="searchForm.order" class="mr-2" placeholder="請選擇圖片排序方式" size="mini" style="width:150px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input class="mr-2" v-model="searchForm.kwyword" placeholder="請輸入相冊名稱" size="mini" style="width:150px;">
          </el-input>
          <el-button type="success" size="mini">搜索</el-button>
        </div>
        <el-button type="success" size="mini" @click="openAlbumModel(false)">創建相冊</el-button>
        <el-button type="warning" size="mini">上傳圖片</el-button>

      </el-header>
      <el-container>
        <el-aside class="bg-white border-right" width="200px" style="position:absolute;top:60px;bottom:60px;left:0;">
          <ul class="list-group list-group-flush">
--------------------------------------------------
            <li class="list-group-item list-group-item-action d-flex align-items-center" style="cursor:pointer;"
              v-for="(item, index) in albums" :key="index" @click.stop="albumChange(index)"
              :class="{'active sum-active':albumIndex === index}">
              {{item.name}}
              <el-dropdown class="ml-auto">
                <span class="btn btn-light btn-sm border">
                  {{item.num}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.stop.native="openAlbumModel({item, index})">修改</el-dropdown-item>
                  <el-dropdown-item @click.stop.native="albumDelete(index)">刪除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
-------------------------------------------------
          </ul>
        </el-aside>
        <el-container>
          <el-main style="position:absolute;top:60px;bottom:60px;left:200px;right:0;">

          </el-main>

        </el-container>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>

    <!-- 修改相冊 -->
    <el-dialog title="修改相冊" :visible.sync="albumModel" width="30%" :before-close="handleClose">
      <el-form :model="albumForm" ref="form" label-width="80px">
        <el-form-item label="相冊名稱">
          <el-input v-model="albumForm.name" size="medium" placeholder="請輸入相冊名稱"></el-input>
        </el-form-item>
        <el-form-item label="相冊順序">
          <el-input-number v-model="albumForm.order" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="albumModel = false">取 消</el-button>
        <el-button type="primary" @click="confirmAlbumModel">確 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        { label: "區域1", value: "區域1" },
        { label: "區域2", value: "區域2" }
      ],
      searchForm: {
        order: "",
        keyword: ""
      },
      albumIndex: 0,
      albumModel: false,
      albumEditIndex: -1,
      albumForm: {
        name: "",
        order: 0
      },
      albums: []
    };
  },
  methods: {
    // 數據初始化
    __init() {
      for (var i = 0; i < 20; i++) {
        this.albums.push({
          name: "相冊名稱" + i,
          num: Math.floor(Math.random() * 100),
          order: 0
        });
      }
    },

    // 相冊切換
    albumChange(index) {
      console.log(index + "相冊切換");
      this.albumIndex = index;
    },

    // 刪除相冊
    albumDelete(index) {
      this.$confirm("是否刪除該相冊?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.albums.splice(index, 1);
          this.$message({
            type: "success",
            message: "刪除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消刪除"
          });
        });
    },

    // 打開對話框
    openAlbumModel(obj) {
      // 修改
      if (obj) {
        let { item, index } = obj;
        //   初始化表單
        this.albumForm.name = item.name;
        this.albumForm.order = item.order;
        this.albumEditIndex = index;
        this.albumModel = true;
        return;
      }
      // 創建
      this.albumForm = {
        name: "",
        order: 0
      };
      this.albumEditIndex = -1;
      this.albumModel = true;
    },

    // 點擊確定修改/創建相冊
    confirmAlbumModel() {
      // 判斷是否爲修改
      if (this.albumEditIndex > -1) {
        this.albumEdit();
        this.albumModel = false;
        return
      }
      this.albums.unshift({
          name:this.albumForm.name,
          order:this.albumForm.order,
          num:0
      })
      this.albumModel = false;
    },

    // 編輯相冊
    albumEdit() {
      this.albums[this.albumEditIndex].name = this.albumForm.name;
      this.albums[this.albumEditIndex].order = this.albumForm.order;
    },

    // 關閉對話框
    handleClose() {
      this.albumModel = false;
    }
  },
  created() {
    this.__init();
  }
};
</script>
<style lang="scss" scoped>
.sum-active {
  color: #67c23a !important;
  background-color: #f0f9eb !important;
  border-color: #c2e7b0 !important;
}
</style>

index.vue（抽離後）

<template>
  <div>
    <el-container style="position:absolute;top:55px;bottom:0;left:0;right:0;">
      <el-header class="d-flex align-items-center border-bottom">
        <div class="d-flex mr-auto">
          <el-select v-model="searchForm.order" class="mr-2" placeholder="請選擇圖片排序方式" size="mini" style="width:150px;">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-input class="mr-2" v-model="searchForm.kwyword" placeholder="請輸入相冊名稱" size="mini" style="width:150px;">
          </el-input>
          <el-button type="success" size="mini">搜索</el-button>
        </div>
        <el-button type="success" size="mini" @click="openAlbumModel(false)">創建相冊</el-button>
        <el-button type="warning" size="mini">上傳圖片</el-button>

      </el-header>
      <el-container>
        <el-aside class="bg-white border-right" width="200px" style="position:absolute;top:60px;bottom:60px;left:0;">
          <ul class="list-group list-group-flush">
-----------------------------------------------------------
            <album-item v-for="(item, index) in albums" :key="index" :item="item" :index="index"
              :active="albumIndex === index" @change="albumChange" @edit="openAlbumModel" @del="albumDel"></album-item>
------------------------------------------------------------
          </ul>
        </el-aside>
        <el-container>
          <el-main style="position:absolute;top:60px;bottom:60px;left:200px;right:0;">

          </el-main>

        </el-container>
      </el-container>
      <el-footer>Footer</el-footer>
    </el-container>

    <!-- 修改相冊 -->
    <el-dialog title="修改相冊" :visible.sync="albumModel" width="30%" :before-close="handleClose">
      <el-form :model="albumForm" ref="form" label-width="80px">
        <el-form-item label="相冊名稱">
          <el-input v-model="albumForm.name" size="medium" placeholder="請輸入相冊名稱"></el-input>
        </el-form-item>
        <el-form-item label="相冊順序">
          <el-input-number v-model="albumForm.order" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="albumModel = false">取 消</el-button>
        <el-button type="primary" @click="confirmAlbumModel">確 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import albumItem from "../../components/image/album-item";
export default {
  components: {
    albumItem
  },
  data() {
    return {
      options: [
        { label: "區域1", value: "區域1" },
        { label: "區域2", value: "區域2" }
      ],
      searchForm: {
        order: "",
        keyword: ""
      },
      albumIndex: 0,
      albumModel: false,
      albumEditIndex: -1,
      albumForm: {
        name: "",
        order: 0
      },
      albums: []
    };
  },
  methods: {
    // 數據初始化
    __init() {
      for (var i = 0; i < 20; i++) {
        this.albums.push({
          name: "相冊名稱" + i,
          num: Math.floor(Math.random() * 100),
          order: 0
        });
      }
    },

    // 相冊切換
    albumChange(index) {
      console.log(index + "相冊切換");
      this.albumIndex = index;
    },

    // 刪除相冊
    albumDel(index) {
      this.$confirm("是否刪除該相冊?", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.albums.splice(index, 1);
          this.$message({
            type: "success",
            message: "刪除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消刪除"
          });
        });
    },

    // 打開對話框
    openAlbumModel(obj) {
      // 修改
      if (obj) {
        let { item, index } = obj;
        //   初始化表單
        this.albumForm.name = item.name;
        this.albumForm.order = item.order;
        this.albumEditIndex = index;
        this.albumModel = true;
        return;
      }
      // 創建
      this.albumForm = {
        name: "",
        order: 0
      };
      this.albumEditIndex = -1;
      this.albumModel = true;
    },

    // 點擊確定修改/創建相冊
    confirmAlbumModel() {
      // 判斷是否爲修改
      if (this.albumEditIndex > -1) {
        this.albumEdit();
        this.albumModel = false;
        return;
      }
      this.albums.unshift({
        name: this.albumForm.name,
        order: this.albumForm.order,
        num: 0
      });
      this.albumModel = false;
    },

    // 編輯相冊
    albumEdit() {
      this.albums[this.albumEditIndex].name = this.albumForm.name;
      this.albums[this.albumEditIndex].order = this.albumForm.order;
    },

    // 關閉對話框
    handleClose() {
      this.albumModel = false;
    }
  },
  created() {
    this.__init();
  }
};
</script>
<style lang="scss" scoped>
.sum-active {
  color: #67c23a !important;
  background-color: #f0f9eb !important;
  border-color: #c2e7b0 !important;
}
</style>