vue项目中封装elementui表格组件的使用；elementui可编辑表格_vue-element 表格封装

1. 在components里创建一个文件夹，在文件夹里创建一个el-table.vue组件，组件代码如下

<template>
    <div class="elTableModule">
        <el-table :data="tabOptions.tableData" border style="width: 100%;">
        	/* 使用插槽去自定义表格最左边一列的内容，例如表格需加入多选框列时*/
            <slot name="tableLeftSlot"></slot>
            <el-table-column v-for="(item,index) in tabOptions.headerColumn" :key="'tableHeader'+index" :prop="item.prop" :label="item.label" :width="item.width">
                <template slot-scope="{ row }">
                	/* 判断是否有需特殊处理的字段内容，如果有则使用插槽在具体页面中去处理，插槽名为需处理的字段名*/
                    <slot v-if='item.slot' :name="item.prop"  :row="row"></slot>
                    /* 当某些字段为空时，用“--”去显示*/
                    <span v-else  v-text="row[item.prop] ? row[item.prop] : '--'"></span>
                </template>
            </el-table-column>
      		 /* 使用插槽去自定义表格最右边一列的内容，例如表格操作列*/
            <slot name="tableRightSlot"></slot>
        </el-table>
    </div>
</template>

<script>
export default {
    name:'',
    props: {
        tabOptions: {
          // 表格数据
          tableData: [],
          // 表头的配置 包括：标题名，标题prop, width等，
          headerColumn: [],
        },
    },
    data() {
        return { }
    },
    methods:{ }
}
</script>

<style scoped="scoped">
/* 表格内文字居中显示*/
 /deep/.el-table .cell{
    text-align: center;
  }
  /* 表头背景色以及表头字体颜色设置*/
  /deep/.el-table__header th{
     background-color: #EFF9FE !important;
     color: #2E6ED2;
  }
</style>

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

2.对表格组件进行引用

<template>
  <div class="tableList">      
      <!-- 表格 -->
      <elTable :tabOptions='TabOptions'>
      	   /*插槽-性别处理（slot名为需处理的字段名）*/
          <template slot-scope="scope" slot="gender">
              <span v-if="scope.row.gender==0">女</span>
              <span v-if="scope.row.gender==1">男</span>
          </template>
           /* 插槽-身高处理（slot名为需处理的字段名）*/
          <template slot-scope="scope" slot="height">
              <span>{{scope.row.height}}cm</span>           
          </template>
        /* 使用名叫tableRightSlot的插槽加操作列*/
        <el-table-column slot="tableRightSlot" fixed="right" label="操作" min-width="150">
            <template slot-scope="scope">
                  <el-button @click="info(scope.row)">查看详情</el-button>                  
            </template>
        </el-table-column>
      </elTable >   
  </div>
</template>
<script>
import elTable from '@/components/common/el-table.vue';
export default {
    name: '',
    // 组件挂载
    components: {
        elTable ,      
    },   
    data() {
        return {            
            // 表格配置参数
            TabOptions:{
                //列表数据
                tableData:[{id:'1111',name:'Jones',gender:1,height:1.78},{id:'222',name:'Jack',gender:1,,height:1.85},{id:'3333',name:'Lucy',gender:0,height:1.68}],
                //表头参数（注意：需特殊处理的字段要加上 slot:true，以便表格组件识别处理）
                headerColumn:[
                  {label: '编号',prop: 'date', width: '120'},
                  {label: '名字',prop: 'date', width: '120'},
                  {label: '性别',prop: 'gender', width: '180',slot:true},
                  {label: '身高',prop: 'height', width: '180',slot:true}              
                ]
            },
       }
    },
    created() {
       
    },
    methods:{
       //查看详情
       info(row){
       	
   	   }
}
</script>

<style scoped="scoped">

</style>

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

3.表格数据格式化（当无数据时用“- -”代替）

<el-table v-loading="loading" :data="tableData">
   <el-table-column align="center" min-width=200 prop="name" label="名称" :formatter="formatTableData"></el-table-column>
</el-table>
1
2
3

methods:{
	formatTableData(row, column, cellValue, index) {
        if (cellValue !== null && cellValue !== "" && cellValue !== undefined) {
            return cellValue;
        } else {
            return "--";
        }
    },
}
1
2
3
4
5
6
7
8
9

二、封装elementui可编辑表格
可编辑表格组件
table-edit.vue

<template>
  <div>
    <el-table :data="tableOptions.tableData" @cell-click="cellCilck" @cell-mouse-leave="cellMouseLeave" height="250" border style="width: 100%">
      <el-table-column v-for="(item,index) in tableOptions.options" :key="index" align="center"
        :prop="item.prop" :label="item.label" :width="item.labelWidth">
        <template slot-scope="{row}">
          <!-- 自定义的字段 -->
          <div v-if="item.isSlot">
            <slot :name="item.prop" :row="row"></slot>
          </div>  
          <div v-else>          
            <el-input v-if="row.isClickProperty == item.prop" v-model="row[item.prop]" placeholder="请输入内容" @change="valChange"></el-input>
            <span v-else>{{row[item.prop]}}</span>
          </div>
        </template>
      </el-table-column>       
    </el-table>
  </div>
</template>
<script>
export default {
  props:{
    tableOptions:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data(){
    return{}
  },
  methods:{
	//单击单元格开启编辑
    cellCilck(row, column, cell, event){
      this.$set(row, "isClickProperty", column.property);    
    },
	//鼠标离开单元格，编辑关闭
    cellMouseLeave(row, column, cell, event){
      this.$set(row, "isClickProperty", "");
    },
	//编辑单元格值变化
    valChange(val){
      this.$emit("editTable",val)
    }
  }
}
</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

table.vue

<template>
  <div>
    <table-edit :tableOptions="tableOption" @editTable="editTable">
      <template slot-scope="{row}" slot="isOK">
        <el-checkbox v-model="row.isOK"></el-checkbox>
      </template>    
    </table-edit>
  </div>
</template>
<script>
import tableEdit from "@/components/table-edit.vue"
export default {
  components:{
    tableEdit
  }, 
  data(){
    return{     
        tableData:[
                  {date1:"张三",date2:"男",date3:"18",date4:"1.74cm",isOK:true},
                  {date1:"李四",date2:"男",date3:"19",date4:"1.80cm",isOK:false},
        ],
        tableOption:{
          tableData:[], //表格数据
          options:[] //表格配置项信息（表头，label宽度等）
        },
        option: [
          {prop:"isOK",label:"是否选择",labelWidth:"",isSlot:true},
          {prop:"date1",label:"姓名",labelWidth:""},
          {prop:"date2",label:"性别",labelWidth:""},
          {prop:"date3",label:"年龄",labelWidth:""},
          {prop:"date4",label:"身高",labelWidth:""},
        ],          
    }
  },
  created(){
    this.setTabel();
  },
  methods:{
    setTabel(){
      this.tableOption.tableData = this.tableData;
      this.tableOption.options = this.option;     
    },
    editTable(val){
      //接收编辑后的值
      console.log(val)
      console.log(this.tableOption.tableData)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

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