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

Question

Answer 1

你的ele什么版本呢？
最新的有文档：https://element.eleme.cn/#/zh-CN/component/table#biao-wei-he-...

Answer 2

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

以下方式是通过在后端返回的数据基础上拼接了总分行数据，具体代码如下：
效果图：

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];        }      }    },}