el-table表格二次封装

后台管理大多数页面都是表格展示，为了提高代码的复用，将表格进行封装

表格封装代码

<template>
    <div class="el-table">
        <el-table :data="listData" border style="width: 100%" 
            @selection-change="handleSelectionChange"
        >
        	<!-- 是否需要选择器 -->
        	<el-table-column
        		v-if="showSelectColumn"
        		type="selection"
       			align="center"
        		width="60"
      		></el-table-column>
            <template v-for="propItem in propList" :key="propItem.prop">
                <el-table-column v-bind="propItem" align="center">
                    <template #default="scope">
                    	<!-- 为表格预留插槽 -->
                        <slot :name="propItem.slotName" :row="scope.row">
                            {{ scope.row[propItem.prop] }}
                        </slot>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>
  
<script>
export default {
    name: "cus-table",
    props: {
        listData: {
            type: Array,
            required: true
        },
        propList: {
            type: Array,
            required: true
        }
        showSelectColumn: {
        	type: Boolean,
            required: false
        }
    },
    data() {
        return {};
    },

    methods: {
    	handleSelectionChange(value) {
      		this.$emit('selectionChange', value)
    	}
    },
};
</script>
  
<style lang="scss" scoped></style>
  

使用封装的表格

<template>
  <div class="content">
    <elTable :listData="userList" :propList="propList" :showSelectColumn="true"
    	@selectionChange="selectionChange"
    >
      <!-- 传入插槽，插槽支持多个 -->
      <template #sex="scope">
        <el-button>{{ scope.row.enable === '1' ? '男' : '女' }}</el-button>
      </template>
      <template #handler>
        <div class="handle-btns">
          <el-button icon="el-icon-edit" size="mini" type="text"
            >编辑</el-button
          >
          <el-button icon="el-icon-delete" size="mini" type="text"
            >删除</el-button
          >
        </div>
      </template>
    </elTable>
  </div>
</template>

<script>
import elTable from '../base-ui/table.vue'
export default {
  name: "hello-table",
  components: {
    elTable
  },
  data() {
    return {
      userList: [],
      propList: [
        { prop: 'name', label: '用户名', minWidth: '100' },
        { prop: 'cellphone', label: '手机号码', minWidth: '100' },
        // slotName 需要自定义数据的插槽名
        { prop: 'sex', label: '性别', minWidth: '100', slotName: 'status' }, 
        {
          prop: 'createAt',
          label: '创建时间',
          minWidth: '250',
          slotName: 'createAt'
        },
        { label: '操作', minWidth: '120', slotName: 'handler' }
      ]
    };
  },

  created() { 
     // 异步操作后给表格赋值
     this.userList = [
        {
          name: '张三',
          cellphone: '188888888888',
          sex: '1',
          createAt: '2023-4-17'
        },
        {
          name: '李四',
          cellphone: '188888888888',
          sex: '1',
          createAt: '2023-4-17'
        }
      ]
  },
  mounted() { },
  methods: {
  	selectionChange(val) {
		console.log(val)
	}
  },
};
</script>

<style lang="scss" scoped></style>