element的table组件可以实现这样的效果吗？底部第一列为总分，中间列合并成一列，最后一列为按钮，怎么实现？

Z时代
2024-02-05
分类：IT

回答：

首先最后一行总分是后台返回还是前端自己写的，后端返回的话，直接给table添加合并列方法，如果是前端自己写，有两种方式，1是在后端返回的表格数据后边push({id:"总分",...}),2是使用组件自带的表尾合计行，不管使用哪种方式，还是需要合并列。

以下方式是通过在后端返回的数据基础上拼接了总分行数据，具体代码如下：
效果图：
element的table组件可以实现这样的效果吗？底部第一列为总分，中间列合并成一列，最后一列为按钮，怎么实现？

html

<el-table
      :data="tableData"
      size="mini"
      border
      :span-method="arraySpanMethod"
    >
      <el-table-column label="序号" prop="id" align="center"></el-table-column>
      <el-table-column
        label="类型"
        prop="type"
        align="center"
      ></el-table-column>
      <el-table-column
        label="频次"
        prop="frequent"
        align="center"
      ></el-table-column>
      <el-table-column
        label="分值"
        prop="store"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" prop="operation" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.id !== '总分'">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-view"
              @click="handleDetailClick(scope.row.id)"
              >查看</el-button
            >
            <el-button
              type="text"
              size="mini"
              icon="el-icon-edit"
              @click="handleEditClick(scope.row)"
              >修改</el-button
            >
          </div>
          <el-button
            v-else
            type="text"
            size="mini"
            icon="el-icon-view"
            @click="handleDetailClick(scope.row.id)"
            >生效</el-button
          >
        </template>
      </el-table-column>
    </el-table>

script

data() {
    return {
      //  模拟后台返回的数据
       tableData: [],
     }
}
created() {
    this.getTableData()
},
methods: {
   getTableData() {
      // 请求后台接口
     xxx().then(res => {
       // this.tableData = res;
       // 模拟后台数据
        this.tableData = [
           {
              id: 1,
              type: "123",
              frequent: "aaa",
              store: 20,
            },
            {
              id: 2,
              type: "234",
              frequent: "bbb",
              store: 30,
            },
            {
              id: 3,
              type: "345",
              frequent: "ccc",
              store: 40,
            },
        ]
        this.tableData.push({ id: "总分",
          type: "100分",
          frequent: "",
          store: "",})
         })
  },
  // 合并列
 arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.id === "总分") {
        if (columnIndex === 1) {
          return [1, 3];
        } else if (columnIndex === 2 || columnIndex === 3) {
          return [0, 0];
        }
      }
    },}