Vue实战【封装一个简单的列表组件,实现增删改查】

简介: Vue实战【封装一个简单的列表组件,实现增删改查】

🌟前言

大家好,上一期的Vue实战都阅读了吗?上一期主要是对Vuex的一个基本操作,通过Vuex我们可以实现全局的状态(数据)共享,以便与我们更好的实现一些需求。

不知道大家在日常工作当中是否被频繁的列表增删改查困扰,功能很简单但确实是非常繁琐的一项工作;今天这一期呢我会从Vue2父子组件如何传值并结合Element来封装一个简单的列表组件;一次封装,多次复用。


🌟table组件封装

在你的component目录下创建一个Table.vue:

<template>
  <el-card class="box-card" style="width: 100%;height: 100%">
    <div class="btnBox">
      <el-button v-for="(item,index) in tableOperation" :key="index" :type="item.type" size="small" @[eventName]="handleClick(item.fun, multipleSelection)">{{ item.label }}</el-button>
    </div>
    <el-table
      style="margin-bottom: 20px"
      :data="tableData"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :highlight-current-row="true"
      fit
      @selection-change="handleSelectionChange"
    >
    <!--这是是为了将表格设置成带有选择框的表格-->
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        align="center"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
      />
    </el-table>
    <div class="block" style="text-align: end">
      <el-pagination
        background
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'Table',
  // 因为是子组件,要接受父组件传递的数据,所以这里我们定义props
  props: {
    tableData: { // 父组件传递过来的表格数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableLabel: { // 父组件传递过来的表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    tableOperation: { // 父组件传递过来的操作按钮数据
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      eventName: 'click',  // 点击按钮绑定的方法,这样写法也可以去绑定一些其他的比如change等方法
      multipleSelection: [] // 这个数组用来保存被选择行的数据,顺序是按照你勾选的顺序来排序的
    }
  },
  methods: {
    // @selection-change方法可以监听到表格里哪一行被选中,类型是数组;
    // 然后我们将它赋值给定义好的 multipleSelection 
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 动态绑定操作按钮的点击事件(按钮是父组件传递过来循环出来的,所以我们给按钮定义一个方法)
    // 接收两个参数,一个是fun(string类型),一个是row(array类型,也就是我们选中行的数据)
    // 这里的某个按钮时传递的参数
    // 比如我点击的是编辑,那这时的fun就是 'edit',执行的方法就是下边的this.edit(row)
    handleClick(fun,row) {
      this[fun](row)
    },
    edit(row) {
      if (!row.length) {
        this.$message.error('请勾选数据后操作')
        return false
      } else if (row.length > 2) {
        this.$message.error('当前仅支持单条数据操作')
        return false
      } else {
        console.log('子组件点击编辑,触发父组件方法;并传递数据', row)
        // 通过$meit通知父组件propClick方法,并传递两个参数:'edit'和row
        this.$emit('propClick', 'edit', row)
      }
    },
    look(row) {
      if (!row.length) {
        this.$message.error('请勾选数据后操作')
        return false
      } else if (row.length > 2) {
        this.$message.error('当前仅支持单条数据操作')
        return false
      } else {
        console.log('子组件点击查看,触发父组件方法;并传递数据', row)
        // 通过$meit通知父组件propClick方法,并传递两个参数:'edit'和row
        this.$emit('propClick', 'look', row)
      }
    },
    delete(row) {
      if (!row.length) {
        this.$message.error('请勾选数据后操作')
        return false
      } else if (row.length > 2) {
        this.$message.error('当前仅支持单条数据操作')
        return false
      } else {
        console.log('子组件点击删除,触发父组件方法;并传递数据', row)
        // 通过$meit通知父组件propClick方法,并传递两个参数:'edit'和row
        this.$emit('propClick', 'del', row)
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style scoped>
</style>

table组件封装好了,就可以在父组件里使用啦。

🌟父组件(展示表格的页面)

创建一个父组件(也就是你的页面),我这里起名index.vue大家可以随意;

<template>
  <div v-loading="tableLoading" class="dashboard-container">
  <!--子组件位置-->
  <!--自定义table-data,table-label,table-operation三个属性,分别传递我们需要的数据-->
  <!--自定义@propClick方法,用来接收子组件的通知并执行定义的btnClick方法-->
    <myTable
     :table-data="tableData" 
     :table-label="tableLabel"
     :table-operation="tableOperation"
      @propClick="btnClick" />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// 根据你的table组件引入到父组件里
import myTable from '@/components/Table/table'
export default {
  name: 'Dashboard',
  // 并在父组件的compoments里边注册
  components: {
    myTable
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  // eslint-disable-next-line vue/order-in-components
  data() {
    return {
      tableLoading: true,
      // 子组件的表格数据
      tableData: [
        { id: 1, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 2, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 3, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 4, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 5, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 6, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 7, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 8, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 9, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 10, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 11, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 },
        { id: 12, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05 }
      ],
      // 子组件的表头数据
      tableLabel: [
        { label: 'ID', width: '40', prop: 'id' },
        { label: '日期', width: '', prop: 'date' },
        { label: '销售量', width: '', prop: 'sales' },
        { label: '销售额', width: '', prop: 'sale' },
        { label: '成本', width: '', prop: 'const' },
        { label: '利润', width: '', prop: 'profit' }
      ],
      // 子组件的操作按钮
      tableOperation: [
        { label: '编辑', fun: 'edit', type: 'primary' },
        { label: '查看', fun: 'look', type: 'success' },
        { label: '删除', fun: 'delete', type: 'danger' }
      ]
    }
  },
  mounted() {
    setTimeout(() => {
      this.tableLoading = false
      this.$message.success('数据加载成功')
    }, 1000)
  },
  methods: {
    // 当父组件接收到了子组件this.$emit的通知后就会执行这个方法来接收子组件点击传递过来的数据
    btnClick(fun, row) {
      if (fun === 'edit') {
        console.log('子组件点击了编辑,父组件收到子组件传递的数据', row)
      } else if (fun === 'look') {
        console.log('子组件点击了查看,父组件收到子组件传递的数据', row)
      } else if (fun === 'del') {
        console.log('子组件点击了删除,父组件收到子组件传递的数据', row)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    /*width: 100%;*/
    margin: 30px;
    height: 88vh;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>

🌟控制台查看父子组件通信是否成功

2023-04-14 (3).png

列表增删改查

🌟Vue2父子组件传递参数

接下来我们来复习一下父子组件传递参数的方法吧

父组件向子组件传递数据:

父组件通过 props 给子组件下发数据

  • 在父组件内为子组件添加自定义属性,例如我上边的table-data,table-label,table-operation三个属性,并为其绑定数据;如果是动态绑定就需要加上 ,反则不用加。
  • 子组件内通过定义props来接受数据;并且有以下几个参数配置;
属性 说明
type 原生构造器 参数的类型
default any 参数的默认值,数组/对象的默认值应当由一个工厂函数返回
required true/false 参数是否必传
validator function 自定义验证函数
Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // 可能是多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数值且有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    },
    propG: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

子组件向父组件传递数据:

子组件通过事件给父组件发送消息

每个 Vue 实例都实现了事件接口,即:

  • 使用 $on(eventName) 监听事件


  • 使用 $emit(eventName, optionalPayload) 触发事件

1. 主要方法在父组件里。

2. 在父组件里添加自定义事件,自定义事件触发执行主要方法

3. 在子组件里写一个通知方法( this.$emit(‘自定义事件’,参数) )用来告诉父组件执行自定义事件。

4. 在需要触发这个事件的元素上添加触发事件(例:@click=“子组件里的通知方法”)

<!-- 子组件 -->
<template>
  <el-card class="box-card" style="width: 100%;height: 100%">
    <div class="btnBox">
      <el-button
         v-for="(item,index) in tableOperation"
        :key="index"
        :type="item.type"
         size="small"
         @click="handleClick(item.fun, multipleSelection)">{{ item.label }}
      </el-button>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'Table',
  methods: {
    add(row) {
      console.log('子组件点击新增,触发父组件里的自定义事件-propClick')
      this.$emit('propClick', 'add')
    }
  }
}
</script>
<style scoped>
</style>
<!-- 父组件 -->
<template>
  <div v-loading="tableLoading" class="dashboard-container">
    <myTable @propClick="btnClick" />
  </div>
</template>
<script>
import myTable from '@/components/Table/table'
export default {
  name: 'Dashboard',
  components: {
    myTable
  },
  methods: {
    //自定义事件-propClick触发该方法, 接收子组件点击按钮数据
    btnClick(fun, row) {
      if (fun === 'edit') {
        console.log('子组件点击了编辑,父组件收到子组件传递的数据', row)
        // 这里就可以去写我们需要调用的接口呀,数据处理逻辑呀等等
      } else if (fun === 'look') {
        console.log('子组件点击了查看,父组件收到子组件传递的数据', row)
        // 这里就可以去写我们需要调用的接口呀,数据处理逻辑呀等等
      } else if (fun === 'del') {
        console.log('子组件点击了删除,父组件收到子组件传递的数据', row)
        // 这里就可以去写我们需要调用的接口呀,数据处理逻辑呀等等
      }
    }
  }
}
</script>

🌟写在最后

这篇文章通过父子组件通信并结合Element封装了一个简单的增删改查列表组件,你是否学会了呢?很多复杂的功能都是通过基础知识举一反三得来的,小伙伴一定记的尝试哦。后续会为小伙伴们持续更新Vue的一些实战小魔法!各位小伙伴让我们 let’s be prepared at all times!


目录
相关文章
|
2天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
8天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
13 2
|
8天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
8天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
9天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。
|
9天前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
9天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
10天前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
24 2