elememt组件table二次封装

组件封装是为了更佳方便使用和复用，否则封装没有意义。

本文的封装只限制于数据展示，和修改。

新增数据和修改数据封装难度过高，暂无实现思路，如有可实现思路，可于评论区与我讨论，若可行，我会尝试实现。

代码基于vue2.x版本
代码包含i18n，如无需要i18n，可以直接把$t('xxx')替换成对应的变量或value即可。需要配置i18n可查看我的另一篇文章

代码如下

定义组件

新增Table.vue
thml

<div>
    <el-table :data="tableData" style="width: 100%;height: 100%;">
      <div slot="empty" style="text-align: left;">
        <span style="font-size: 20px">
          <Icon type="md-search" />{{ $t('table.emptyText') }}	<!-- i18n写法，可以直接使用“未查询到数据”在页面展示-->
        </span>
      </div>
      <el-table-column v-for="(item, index) in  showMessageList" :key="index" :fixed="index < 3" :prop="item.propName"
        :label="$t(item.labelname)" width="150"><!-- i18n写法，不需要i18n去掉 `$t()`, item.labelname不变-->
      </el-table-column>
      <el-table-column fixed="right" :label="$t('table.action')" width="100">
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: right;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizesArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>

js

export default {
  name: 'Table',
  props: {
    showMessageList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
      required: true
    },
    porpTotal: {
      type: Number,
      default: 5,
      required: true
    },
    pageSizesArray: {
      type: Array,
      default: () => {
        return [5, 10, 20, 50, 100];
      },
      required: false
    }
  },
  data() {
    return {
      pageSize: 5,
      currentPage: 1,
      total: 0,

      dialogTableVisible: false,
      newForm: {},
      rules: {},
    }
  },
  components: {
  },
  created() {
    this.total = this.porpTotal;
  },
  methods: {
//    handleView(row) {
//      console.log(row);
//      this.$emit('fat_viewStore', row);
//    },
//    handleEdit(row) {
//      console.log(row);
//      this.$emit('fat_editStore', row);
//    },
	// 都是重新查询数据
    handleSizeChange(val) {
      this.pageSize = val;
      this.$emit('fat_queryData', this.currentPage, this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit('fat_queryData', this.currentPage, this.pageSize);
    },
    handleDelete(row) {
	    // 发生请求删除
	}
  },
  mounted() {

  },
}

组件使用

父组件引入，注册。
在需要的地方使用table组件

thml

<Table :showMessageList="storeShowMessageList" :tableData="storeData" :porpTotal="total"
      @fat_queryData="handleQueryDate"></Table>

js

export default {
  name: 'Test',
  data() {
    return {
      storeShowMessageList: [{
        "labelname": 'table.student', // 表格上head的名称， 代码示例为表示变量以支持i18n。改为实际值如：学生姓名
        "propName": 'studentName'	// 表格上head的名称对应的数据名字， 根据展示的数据值名填写。如下
      },{
        "labelname": 'table.studentNO', // 表格上head的名称， 代码示例为表示变量以支持i18n。改为实际值如：学生姓名
        "propName": 'studentNO'	// 表格上head的名称对应的数据名字， 根据展示的数据值名填写。如下
      },
      ...
      ],
      // 请求后端返回的数据列表
      storeData: [
        {
          "studentName": "张三",	// studentName就是storeShowMessageList里面对象的propName的值
          "studentNO": "00001",
          ...
        }
      ],
      total: 100			// 数据的数量

    }
  },
  components: {
    Table
  },
  methods: {
    handleQueryDate(currentPage, size) {
      ...
      // 发生请求拉取数据
    }
    
  },
  mounted() {

  }
}