elementUI中的table表格不同数据结构

最新推荐文章于 2023-06-01 12:45:34 发布

橘哥哥

最新推荐文章于 2023-06-01 12:45:34 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 elementUI

本文链接：https://blog.youkuaiyun.com/ju__ju/article/details/97801002

项目中需要使用的表格数据结构是下图所示

但是找了elementUI中的表格发现并没有自己需要的

数据结构并不相同,于是做了一下改造,因为后台并不会传一个单独的表格数据,所以methods中定义了一个init()方法,在init()中改造数据结构,然后created调用方法,

1.样式结构

<div style="width:550px;">
    <el-table
      :data="tableData"
      style="width: 100%"
      :border="true"
      :header-cell-style="{'text-align':'center','background-color':'#f5f5f6'}"
      :cell-style="{'text-align': 'center' }"
      size="mini"
    >
      <el-table-column prop="type" label="类别" width="80"></el-table-column>
      <el-table-column prop="single" label="单选题">
        <template slot-scope="scope">
          <span v-text="scope.row.single"></span>
        </template>
      </el-table-column>
      <el-table-column prop="multiple" label="多选题">
        <template slot-scope="scope">
          <span v-text="scope.row.multiple"></span>
        </template>
      </el-table-column>
      <el-table-column prop="judge" label="判断题">
        <template slot-scope="scope">
          <span v-text="scope.row.judge"></span>
        </template>
      </el-table-column>
      <el-table-column prop="blank" label="填空题">
        <template slot-scope="scope">
          <span v-text="scope.row.blank"></span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="问答题">
        <template slot-scope="scope">
          <span v-text="scope.row.question"></span>
        </template>
      </el-table-column>
    </el-table>
</div>

2.模拟数据

<script>
export default {
  data() {
    return {
      paper: {
        singleCount: "45",
        multipleCount: "30",
        judgeCount: "25",
        singleScore: "1",
        multipleScore: "1",
        judgeScore: "1",
        scores: "100"
      },
      tableData: [{ type: "题数" }, { type: "分/题" }, { type: "总分" }]
    };
  },
  methods: {
    init() {
      this.tableData[0].single = this.paper.singleCount
        ? this.paper.singleCount
        : "-";
      this.tableData[1].single = this.paper.singleScore
        ? this.paper.singleScore + "分/题"
        : "-";
      this.tableData[2].single = this.paper.singleScore
        ? this.paper.singleScore * this.paper.singleCount
        : "-";
      this.tableData[0].multiple = this.paper.multipleCount
        ? this.paper.multipleCount
        : "-";
      this.tableData[1].multiple = this.paper.multipleScore
        ? this.paper.multipleScore + "分/题"
        : "-";
      this.tableData[2].multiple = this.paper.multipleScore
        ? this.paper.multipleScore * this.paper.multipleCount
        : "-";
      this.tableData[0].judge = this.paper.judgeCount
        ? this.paper.judgeCount
        : "-";
      this.tableData[1].judge = this.paper.judgeScore
        ? this.paper.judgeScore + "分/题"
        : "-";
      this.tableData[2].judge = this.paper.judgeScore
        ? this.paper.judgeScore * this.paper.judgeCount
        : "-";
      this.tableData[0].blank = this.paper.blankCount
        ? this.paper.blankCount
        : "-";
      this.tableData[1].blank = this.paper.blankScore
        ? this.paper.blankScore + "分/题"
        : "-";
      this.tableData[2].blank = this.paper.blankScore
        ? this.paper.blankScore * this.paper.blankCount
        : "-";
      this.tableData[0].question = this.paper.questionCount
        ? this.paper.questionCount
        : "-";
      this.tableData[1].question = this.paper.questionScore
        ? this.paper.questionScore + "分/题"
        : "-";
      this.tableData[2].question = this.paper.questionScore
        ? this.paper.questionScore * this.paper.questionCount
        : "-";
     // console.log(this.tableData);
    }
  },
  created() {
    this.init();
  }
};

这样就可以了