element ui + vue 表格列数据过滤与组件通信

最新推荐文章于 2024-08-01 14:22:09 发布

原创最新推荐文章于 2024-08-01 14:22:09 发布 · 781 阅读

0 ·

CC 4.0 BY-SA版权

element ui 同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文详细介绍Vue中父组件与子组件之间的通信原理，包括数据传递与更新的方法。同时，分享了如何在子组件中使用过滤器进行列数据处理的技巧，避免额外的插槽编写，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天记录一下，关于列数据过滤与组件通信之间很好的结合，并纪念一下我的踩坑经过。

一、父组件

<template>
  <div>
    <sheet :title="title" 
            :tableHead="tableHead" 
            :tableData="tableData" 
            :pageNum.sync="workOrder.pageNum"
            :total="workOrder.total"
            @page-mode="queryThingsByPage"
            :hasPagination="true">
    </sheet>
  </div>
</template>
<script>
//此处需要在引号里写入正确的子组件的路径
import sheet from './sheet.vue'
export default {
  data () {
    return {
      title: '测试表格',
      tableHead: [
        {
          label: '学号',
          prop: 'no'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '性别',
          prop: 'sex',
          formatter: this.sexFormat
        },
        {
          label: '总分',
          prop: 'scores'
        }
      ],
      tableData: [
        {
          no: 'TNT001',
          name: '花心筒',
          sex: 'M',
          scores: 500
        },
        {
          no: 'TNT002',
          name: '雀巢',
          sex: 'F',
          scores: 666
        },
        {
          no: 'TNT003',
          name: '梦龙',
          sex: 'M',
          scores: 389
        },
        {
          no: 'TNT004',
          name: '可爱多',
          sex: 'F',
          scores: 389
        }
      ]
    }
  },
  //装载子组件
  components: {sheet},
  methods: {
    sexFormat (row, column, cellValue, index) {
      if (cellValue === 'M') {
        return '男'
      } else if (cellValue === 'F') {
        return '女'
      } else {
        '未登记'
      }
    },
    queryThingsByPage: {
        //此处省略分页查询实体
    }
  }
}
</script>

二、table子组件

<template>
  <div class="sheet-box">
    <div class="sheet-title" v-if="title">{{title}}</div>
    <div class="sheet-content">
      <el-table :data="tableData" stripe>
        <el-table-column
          class="tableHead"
          v-for="item in tableHead"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter">
        </el-table-column>
        <slot name="remark" v-if="hasRemark"></slot>
      </el-table>
      <el-pagination
        class="sheet-content-page"
        v-if="hasPagination"
        small
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="total"
        @current-change="queryPage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        page: this.pageNum
      }
    },
    components: {},
    props: {
      title: {
        type: String,
        default: ''
      },
      tableHead: {
        type: Array,
        default: [],
        required: true
      },
      tableData: {
        type: Array,
        default: [],
        required: true
      },
      hasRemark: {
        type: Boolean,
        default: false
      },
      hasPagination: {
        type: Boolean,
        default: false
      },
      pageNum: {
        type: Number,
        default: 1
      },
      total: {
        type: Number,
        default: 0
      }
    },
    methods: {
      queryPage (currentPage) {
        this.$emit('update:pageNum', currentPage)
        this.$emit('page-mode')
      }
    }
  }
</script>

<style lang="less">
  .sheet-box {
    .sheet-title {
      padding: 10px 0;
    }
    .sheet-content {
      width: 100%;
      margin-bottom: 20px;
      /deep/ .el-table th {
        background-color:#EBEEF5 !important;
      }
      .sheet-content-page {
        float: right;
      }
    }
  }
</style>