封装el-table组件_el-table template

封装的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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

父组件中的使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42