el-table 自定义字段展示

element-ui提供了表单的每个字段回调处理，用以处理特殊值的展示，如枚举，百分比数据等

1
2
3
4
<el-table>
  <el-table-column prop="name"  :formatter="columnFormatter"> </el-table-column>
  <el-table-column  prop="gender" :formatter="columnFormatter"> </el-table-column>
</el-table>
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
export default {
  name: 'SearchTable',
  props:{
    columnFormatter:{
      type:Function,
      default(row,column){
        //这每个元素解析都会调用，业务上可以根据此来自定义展示，
        // 如 1-男 2-女
        let property = coulmn.property;

        //只有gender字段处理
        if (property==='gender'){
          if (row[property]===1){
            return '男';
          } else if (row[property]===2) {
            return '女'
          } else {
            return '未知'
          }
        }
        //其余字段不处理直接返回
        return row[property];
      }
    }
  },

扩展，这里的columnFormatter也可以由父组件传:columnFormatter="columnFormatter",columnFormatter为父组件的方法

合并表格

html 片段

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
<div class="app-container">
  <el-row :gutter="20">
    <!--用户数据-->
    <el-col :span="20" :xs="24">
      
      <el-table v-loading="loading"
                :span-method="arraySpanMethod"
                :data="certificates"
                @selection-change="handleSelectionChange"
                border="true"
                 highlight-current-row="true"
      >
        <el-table-column type="selection" width="50" align="center"/>
        <el-table-column label="日期" align="center" prop="createTime" v-if="showColumns[1].visible" width="auto" >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="凭证字号" align="center" key="zihao" prop="zihao" v-if="showColumns[2].visible"
                         :show-overflow-tooltip="true" width="auto" min-width="25%" />
        <el-table-column label="附单据" align="center" key="fudanju" prop="fudanju" v-if="showColumns[3].visible"
                         :show-overflow-tooltip="true"  width="auto" min-width="30%"/>
        <el-table-column label="摘要" align="center" key="zhaiyao" prop="zhaiyao" v-if="showColumns[4].visible"
                         :show-overflow-tooltip="true"  width="auto" min-width="100%" />
        <el-table-column label="科目" align="center" key="kemu" prop="kemu"  v-if="showColumns[5].visible"  width="auto" min-width="100%" />
        <el-table-column label="借方金额" align="center" key="jiefangjine" prop="jiefangjine" v-if="showColumns[6].visible" width="auto" min-width="30%"/>
        <el-table-column label="贷方金额" align="center" prop="daifangjine" v-if="showColumns[7].visible" width="auto" min-width="30%"/>
        <el-table-column label="制单人" align="center" prop="createUserName" v-if="showColumns[8].visible" width="auto" min-width="30%"/>
        <el-table-column label="审核人" align="center" prop="approvalUserName" v-if="showColumns[9].visible" width="auto" min-width="30%"/>

        <el-table-column
          label="操作"
          align="center"
          width="auto" min-width="30%"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:user:edit']"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:user:remove']"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.size"
        @pagination="getList"
      />
    </el-col>
  </el-row>
</div>

js片段

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
export default {
  name: "Certificate",
  data() {
    return {
      loading: false,
      certificates: [
        {
          id: 1,
          createTime: '2022-07-30 10:00',
          zihao: '记-1',
          fudanju: '1张',
          certRows: [
            {
              zhaiyao: '发放上月工资',
              kemu: '应付职工薪酬',
              jiefangjine: '1000',
              daifangjine: '',
            },
            {
              zhaiyao: '发放上月工资',
              kemu: '应付职工薪酬',
              jiefangjine: '',
              daifangjine: '1000',
            }
          ],
          createUserName: '刘香',
          approvalUserName: '未审核'
        },{
          id: 2,
          createTime: '2022-07-30 10:00',
          zihao: '记-2',
          fudanju: '1张',
          certRows: [
            {
              zhaiyao: '发放上月工资',
              kemu: '应付职工薪酬',
              jiefangjine: '1000',
              daifangjine: '',
            },
            {
              zhaiyao: '发放上月工资',
              kemu: '应付职工薪酬',
              jiefangjine: '800',
              daifangjine: '',
            },
            {
              zhaiyao: '发放上月工资',
              kemu: '应付职工薪酬',
              jiefangjine: '',
              daifangjine: '1800',
            },
          ],
          createUserName: '刘香',
          approvalUserName: '未审核'
        }
      ],
      combineColumn:[4,5,6,7],
      lineIndex:[],

      showColumns: [
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
        {visible: true},
      ],
      queryParams: {
        page: 0,
        size: 10
      },
      total: 0
    }
  },
  mounted() {
    this.listCertificate()
  },
  methods: {
    //处理数据
    listCertificate() {

      //拿到合并开始行数和本次合并行数
      let lineIndex = []
      //记录行数
      let currentRow = 0
      //新数据容器
      let formatDatas = []
      //拿到数据
      let table = this.certificates
      //循环外层数组
      table.forEach((item, i, data) => {
        lineIndex.push(
          {row:currentRow,index:item.certRows.length}
        )
        //循环内层数组，拆分其中的值单独字段
        item.certRows.forEach((sub, subI, subData) => {
          currentRow += 1
          formatDatas.push({
            id: item.id,
            createTime: item.createTime,
            zihao: item.zihao,
            fudanju: item.fudanju,
            zhaiyao: sub.zhaiyao,
            kemu: sub.kemu,
            jiefangjine: sub.jiefangjine,
            daifangjine: sub.daifangjine,
            createUserName: item.createUserName,
            approvalUserName: item.approvalUserName,
          })
        })
      })
      this.lineIndex = lineIndex
      this.certificates = formatDatas
      console.log("返回数据arr"+JSON.stringify(lineIndex));
      console.log("返回数据tableData6"+JSON.stringify(formatDatas));
    },
    /* 执行函数
    生成一个索引的数组，表示哪些行有合并
    [{"row":0,"index":3},{"row":3,"index":2},{"row":5,"index":4}]
    可以合并以下样式的列
     [
       {"id":"1","region":"深圳","type":"外贸","company":"深圳外贸1"},
       {"id":"1","region":"深圳","type":"外贸","company":"深圳外贸2"},
       {"id":"2","region":"北京","type":"金融","company":"北京金融公司1"},
       {"id":"2","region":"北京","type":"金融","company":"北京金融公司2"},
       {"id":"3","region":"上海","type":"金融","company":"上海金融1"},
       {"id":"3","region":"上海","type":"金融","company":"上海金融2"}
     ]
     */
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (this.combineColumn.indexOf(columnIndex) ===-1) {
        let obj = [0, 0]
        this.lineIndex.some(v => {
          if (rowIndex === v.row) {
            obj = [v.index, 1]
          }
        })
        return obj
      }
    },
    handleSelectionChange() {

    },
    handleUpdate() {

    },
    handleDelete() {

    },
    getList() {

    }
  }
}