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>exportdefault{name:'Table',// 因为是子组件，要接受父组件传递的数据，所以这里我们定义propsprops:{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('请勾选数据后操作')returnfalse}elseif(row.length >2){this.$message.error('当前仅支持单条数据操作')returnfalse}else{
        console.log('子组件点击编辑，触发父组件方法;并传递数据', row)// 通过$meit通知父组件propClick方法，并传递两个参数：'edit'和rowthis.$emit('propClick','edit', row)}},look(row){if(!row.length){this.$message.error('请勾选数据后操作')returnfalse}elseif(row.length >2){this.$message.error('当前仅支持单条数据操作')returnfalse}else{
        console.log('子组件点击查看，触发父组件方法;并传递数据', row)// 通过$meit通知父组件propClick方法，并传递两个参数：'edit'和rowthis.$emit('propClick','look', row)}},delete(row){if(!row.length){this.$message.error('请勾选数据后操作')returnfalse}elseif(row.length >2){this.$message.error('当前仅支持单条数据操作')returnfalse}else{
        console.log('子组件点击删除，触发父组件方法;并传递数据', row)// 通过$meit通知父组件propClick方法，并传递两个参数：'edit'和rowthis.$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'exportdefault{name:'Dashboard',// 并在父组件的compoments里边注册components:{
    myTable
  },computed:{...mapGetters(['name'])},// eslint-disable-next-line vue/order-in-componentsdata(){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 =falsethis.$message.success('数据加载成功')},1000)},methods:{// 当父组件接收到了子组件this.$emit的通知后就会执行这个方法来接收子组件点击传递过来的数据btnClick(fun, row){if(fun ==='edit'){
        console.log('子组件点击了编辑,父组件收到子组件传递的数据', row)}elseif(fun ==='look'){
        console.log('子组件点击了查看,父组件收到子组件传递的数据', row)}elseif(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>

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

列表增删改查

🌟Vue2父子组件传递参数

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

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

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

• 在父组件内为子组件添加自定义属性，例如我上边的table-data,table-label,table-operation三个属性，并为其绑定数据；如果是动态绑定就需要加上 ：，反则不用加。
• 子组件内通过定义props来接受数据；并且有以下几个参数配置；
  属性值说明type原生构造器参数的类型defaultany参数的默认值，数组/对象的默认值应当由一个工厂函数返回requiredtrue/false参数是否必传validatorfunction自定义验证函数

  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>exportdefault{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'exportdefault{name:'Dashboard',components:{
    myTable
  },methods:{//自定义事件-propClick触发该方法, 接收子组件点击按钮数据btnClick(fun, row){if(fun ==='edit'){
        console.log('子组件点击了编辑,父组件收到子组件传递的数据', row)// 这里就可以去写我们需要调用的接口呀，数据处理逻辑呀等等}elseif(fun ==='look'){
        console.log('子组件点击了查看,父组件收到子组件传递的数据', row)// 这里就可以去写我们需要调用的接口呀，数据处理逻辑呀等等}elseif(fun ==='del'){
        console.log('子组件点击了删除,父组件收到子组件传递的数据', row)// 这里就可以去写我们需要调用的接口呀，数据处理逻辑呀等等}}}}</script>

🌟写在最后

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

🌟JSON包里写函数，关注博主不迷路

✨原创不易，还希望各位大佬支持一下！
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！