element-ui后台管理系统学习(7)-列表组件抽离

你的名字 2021-08-03 00:11 326阅读 0赞

页面中的列表组件抽离，例如：将页面中循环的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>