封装el-table组件

最新推荐文章于 2024-09-06 14:01:02 发布

原创最新推荐文章于 2024-09-06 14:01:02 发布 · 428 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

vue 专栏收录该内容

5 篇文章

订阅专栏

这篇博客介绍了如何在Vue中封装一个基于Element UI的表格组件，包括选择、排序和自定义插槽功能。组件接受`tableData`、`tableConfig`和`loading`等属性，允许父组件自定义列显示、操作按钮等内容，并通过`@selectionChange`事件传递选中行数据。

封装的el-table组件

<template>
  <el-table
    border
    v-loading="loading"
    :data="tableData"
    @selection-change="selectionChange"
    style="width: 100%">
    <el-table-column
      v-if="tableType"
      :type="tableType"
      width="55">
    </el-table-column>
    <template v-for="item in tableConfig">
      <el-table-column
        v-if="item.slotName"
        :sortable="item.sortable"
        :prop="item.field"
        :min-width="item.minWidth"
        :label="item.label"
      >
        <template slot-scope="scope">
          <slot :name="item.slotName" :scope="scope"></slot>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :sortable="item.sortable"
        :prop="item.field"
        :min-width="item.minWidth"
        :label="item.label"
      >
        <template slot-scope="scope">
          <span @click="() => {$emit(item.method, scope.row)}">{{scope.row[item.field]}}</span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    tableType: String,
    /* tableType   表格类型
      属性值： index/selection/空
    */
    tableConfig:Array,
    /*
      tableConfig     配置项 | Array
        field: 列的名称 | string
        label: 列的名称 | string
        sortable：列是否排序 | boolean
        minWidth： 列的最小宽度 | number
        slotName： 插槽名称 | 列的类型为插槽时加上该属性 | string
        showPopover： 列是否需要展示popover组件 | boolean
        method: 绑定的事件名称 | string
      例：（不需要的属性可不加）
      tableConfig: [
        {
          field: 'name',
          label: '姓名',
          sortable: true,
          minWidth: 60
        },
        {
          field: 'sex',
          label: '年龄',
        },
        {
          label: '操作',
          slotName: 'operation',
        }
      ],
     */
    tableData: Array
  },
  methods: {
    selectionChange(selection) {
      this.$emit('selectionChange',selection)
    }
  }
}
</script>

父组件中的使用

<template>
	<MyTable 
	   :tableData="tableData" 
	   :tableConfig="tableConfig" 
	   :loading="loading" 
	   tableType="selection" >
	   <template v-slot:operation="slotData">
	   		<el-button type="primary" size="mini">添加</el-button>
	   		<el-button type="danger" size="mini">删除</el-button>
	   </template>
	</MyTable>
</template>

<script>
export default {
	data() {
	    return {
	    	loading: false,
	    	tableData:[{
	    		name:'张山',
	    		sex: 18
	    	}],
	    	tableConfig: [
	        {
	          field: 'name',
	          label: '姓名',
	          sortable: true,
	          minWidth: 60
	        },
	        {
	          field: 'sex',
	          label: '年龄',
	        },
	        {
	          label: '操作',
	          slotName: 'operation',
	        }
	      ],
	    }
	}
}
</script>