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

作者站长头像
站长
· 阅读数 8

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

回复
1个回答
avatar
test
2024-06-29

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

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

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];
        }
      }
    },
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容