vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计（每行末尾合计功能）

vue + element 实现可编辑表格、动态渲染表头表格数据、列向数据合计（每行末尾合计）

1，首先得在项目中集成element-ui 安装，注册，具体参照 element-ui的集成

2，我这里使用的vue-cli脚手架搭建的项目，可网上搜索相关知识

3，我的需求，做一个比赛项目打分表，评委可以实现在线打分，表头和表格数据首先都是动态获取后台数据进行渲染，这里我先写成假数据以供大家参考

4，HTML部分代码

<template>
  <div>
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <div>
         // 表格数据在这里： :data="tableData"
          <el-table
            border
            :data="tableData"
            class="tb-edit"
            style="width: 100%"
            highlight-current-row
            @row-click="handleCurrentChange"
          >
            <el-table-column label="项目名称">
              <template scope="scope">
                <span>{{ scope.row.item }}</span>
              </template>
            </el-table-column>
            
                 //  动态循环表头数据
            <el-table-column :label="item.val" v-for="(item,index) in tableHead" :key="index">
              <template scope="scope">
                <el-input
                  size="small"
                  v-model="scope.row[item.item]"
                  placeholder="0"
                  type="number"
                  @change="handleEdit(scope.$index, scope.row,item.item)"
                ></el-input>
                <span>{{ scope.row[item.item] }}</span>
              </template>
            </el-table-column>

            <el-table-column label="总分" prop="total">
                        
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-footer> <el-button type="primary">提交</el-button></el-footer>
    </el-container>
  </div>
</template>
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

5，script部分代码

<script>
export default {
  data() {
    return {
        //  表头数据
      tableHead:[
        {val:'指标1',item:'target1'},
        {val:'指标2',item:'target2'},
        {val:'指标3',item:'target3'},
        {val:'指标4',item:'target4'},
        {val:'指标5',item:'target5'}],
        // 表格数据
      tableData: [
        {
          item: '项目1',
          target1: 0,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0
        },
        {
          item: '项目2',
          target1: 0,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0
        },
        {
          item: '项目3',
          target1: 0,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0
        },
        {
          item: '项目4',
          target1: 0,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0
        },
        {
          item: '项目5',
          target1: 0,
          target2: 0,
          target3: 0,
          target4: 0,
          target5: 0,
          total: 0
        }
      ]
    }
  },
  methods: {
    // 合计
    handleEdit(index, row) {
      var sum = 0
      this.tableHead.forEach(element => {
        sum +=Number(this.tableData[index][element.item]) 
      });
      row.total =sum
    },
  }
}
</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

6，CSS部分代码（这里是实现可编辑的关键样式一定不能少）

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  overflow: auto;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
.tb-edit .el-input {
  display: none;
}
.tb-edit .current-row .el-input {
  display: block;
}
.tb-edit .current-row .el-input + span {
  display: none;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
</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

7，实现效果图

这里实现的是点击可编辑，且在点击下一处任何地方，结尾自动合计总分，这里的数据是临时写的假数据（表头的项目名称和合计是写死的，因为它们对应的表格数据是不可编辑的，所以就写死了，循环的表头下面的数据都是可编辑的），后期大家可以把假数据注销，拿到后台接口，通过发送axios请求到后台数据，在渲染到前端页面即可。