elementui 表格的简单封装

由于最近开发公司的后台项目 遇到很多的表格的页面 思来想去 封装一下 浅浅封装表格组件吧！

1.父组件代码  labesArr中 主要写一写表格 表头的配置项相关一些

 2.子组件代码 主要是控制渲染 以及 做一些判断  

完整代码

1.父组件

 

<template>

  <div>

    <tables :tableData="tableData" @upArr="update"></tables>

  </div>

</template>

 

<script>

import tables from '../view/tables/index.vue';

export default {

  data() {

    return {

      tableData: {

        // 这个里面全部写表头的配置项

        labesArr: [

          { label: '序号', wdith: 100 ,type:'selection'},

          { label: '校区代码', wdith: 100,type:'' },

          { label: '校区名称', wdith: 100,type:'' },

          { label: '校区地址', wdith: 100,type:''  },

          { label: '负责人', wdith: 100,type:''  },

          { label: '联系方式', wdith: 100,type:''  },

          { label: '电子邮箱', wdith: 100,type:''  },

          { label: '操作', wdith: 100,type:''  },

        ],

        datas: [

          {

            serial: 0,

            schoolCode: '0',

            studentNmae: '王八屯',

            studentAddres: '王八路',

            functionary: '陈剑',

            concartPhone: '1111',

            email: '2222',

            width: 100,

          },

          {

            serial: 1,

            schoolCode: '0',

            studentNmae: '王八屯',

            studentAddres: '王八路',

            functionary: '陈剑',

            concartPhone: '1111',

            email: '2222',

            width: 100,

          },

          {

            serial: 2,

            schoolCode: '0',

            studentNmae: '王八屯',

            studentAddres: '王八路',

            functionary: '陈剑',

            concartPhone: '1111',

            email: '2222',

            width: 100,

          },

          {

            serial: 3,

            schoolCode: '0',

            studentNmae: '王八屯',

            studentAddres: '王八路',

            functionary: '陈剑',

            concartPhone: '1111',

            email: '2222',

            width: 100,

          },

          {

            serial: 4,

            schoolCode: '0',

            studentNmae: '王八屯',

            studentAddres: '王八路',

            functionary: '陈剑',

            concartPhone: '1111',

            email: '2222',

            width: 100,

          },

          {

            serial: 5,

            schoolCode: '0',

            studentNmae: '王八屯',

            studentAddres: '王八路',

            functionary: '陈剑',

            concartPhone: '1111',

            email: '2222',

            width: 100,

          },

        ],

      },

    };

  },

  methods: {

    update(row) {

      console.log(row, '我是父组件触发的事件哦');

      let ids = row.serial;

      console.log(this.tableData.datas, 'tableData');

      this.tableData.datas.forEach((item, index) => {

        if (item.serial == ids) {

          this.tableData.datas.splice(index, 1);

        }

      });

    },

  },

  components: {

    tables,

  },

};

</script>

2.子组件

<template>

  <div>

    <el-table

      ref="multipleTable"

      :data="dataTables"

      tooltip-effect="dark"

      style="width: 100%"

      @selection-change="handleSelectionChange"

    >

      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column

        v-for="(item, index) in dataLable"

        :key="index"

        :label="item.label"

        :width="item.width"

      >

        <template slot-scope="scope">

          <span>

            <span v-if="item.label == '序号'">{{ scope.row.serial }}</span>

            <span v-if="item.label == '校区代码'">{{

              scope.row.schoolCode

            }}</span>

            <span v-if="item.label == '校区名称'">{{

              scope.row.studentNmae

            }}</span>

            <span v-if="item.label == '校区地址'">{{

              scope.row.studentAddres

            }}</span>

            <span v-if="item.label == '负责人'">{{

              scope.row.functionary

            }}</span>

            <span v-if="item.label == '联系方式'">{{

              scope.row.concartPhone

            }}</span>

            <span v-if="item.label == '电子邮箱'">{{ scope.row.email }}</span>

            <span v-if="item.label == '操作'"

              ><button @click="changArr(scope.row)">1234</button></span

            >

          </span>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

export default {

  props: {

    tableData: Object,

  },

  data() {

    return {

      multipleSelection: [],

      tableArr: [],

      dataTables: [],

      dataLable: [],

    };

  },

  methods: {

    // 自定义事件

    changArr(row) {

      console.log(row,'我是子组件触发的事件!!')

      this.$emit('upArr',row);

    },

    toggleSelection(rows) {

      if (rows) {

        rows.forEach((row) => {

          this.$refs.multipleTable.toggleRowSelection(row);

        });

      } else {

        this.$refs.multipleTable.clearSelection();

      }

    },

    handleSelectionChange(val) {

      console.log(val, '000');

      let arrs = val;

      let ids = [];

      arrs.forEach((item) => {

        ids.push(item.date);

      });

      console.log(ids, '0');

    },

  },

  mounted() {

    this.dataTables = this.tableData.datas; //表格数据

    this.dataLable = this.tableData.labesArr; //表头数据

  },

};

</script>

然后 子组件 通过自定义事件 在操作一栏 进行自定义事件 通知父组件 进行 删除修改以及一系列的操作

 在这里 大概就完成了    刚毕业 还是个菜鸡   还有很多地方做的不好  轻喷!!