Element UI的table不同应用

野槐

已于 2023-11-01 15:11:54 修改

阅读量457

点赞数

文章标签： ui vue.js elementui

于 2023-11-01 15:08:35 首次发布

本文链接：https://blog.csdn.net/qq_44930306/article/details/134161335

版权

一、自定义表头

二、纵向表头(动态表头)

2.1、分别拿到表头和表头中日期对应的行数据

2.2、拿到每个日期对应的列数据

一、自定义表头

          <el-table-column prop="chu" align="center">
            <!-- 自定义表头 -->
            <template slot="header"
              ><span class="circle" style="background: #5dd49f"></span
              >出勤</template
            >
          </el-table-column>

二、纵向表头(动态表头)

以课表考勤图为例：

有两种格式的数据：

2.1、分别拿到表头和表头中该课节对应的行数据

<el-table
:data="tableOldData"
style="width: 100%"
border
:row-style="{ height: '100px' }"
:header-cell-style="{background: '#F8F8F8',color: '#172b4d',height: '70px',}"
v-if="visibleCalendar.length > 0">
            <el-table-column
              prop="name"
              label="课节"
              fixed="left"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              :label="item.date + item.week"
              v-for="(item, index) in visibleCalendar"
              :key="index"
              align="center"
            >
              <template slot-scope="{ row }">
                <div class="cell_boxs" v-if="row.dayData[item.date].type > -1">
                  <div class="cell_tops">
                    <span
                      :style="
                        'background-color:' +
                        colorType(row.dayData[item.date].type)
                      "
                      class="circle"
                    ></span>
                    <span>{{
                      typeStatistics(row.dayData[item.date].type)
                    }}</span>
                  </div>
                  <div class="cell_bottom">
                    <span>{{ row.dayData[item.date].subject }}</span>
                    <span>{{ row.dayData[item.date].name }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
</el-table>
<script>
data() {
   return {
      visibleCalendar: [
        { date: "2023-09-26", week: "周六" },
        { date: "2023-10-25", week: "周一" },
        { date: "2023-10-26", week: "周二" },
        { date: "2023-10-27", week: "周三" },
        { date: "2023-10-28", week: "周四" },
        { date: "2023-10-29", week: "周五" },
      ],
      dateTable: [
        {
          name: "第1-2节",
          dayData: {
            "2023-10-25": {
              type: 1,
              name: "赵翔",
              subject: "英语写作基础",
            },
            "2023-10-26": {
              type: 0,
              name: "赵翔",
              subject: "英语写作基础",
            },
            "2023-10-27": {
              type: 2,
              name: "赵翔",
              subject: "英语写作基础",
            },
          },
        },
        {
          name: "第3-4节",
          dayData: {
            "2023-09-26": {
              type: 2,
              name: "都会迟",
              subject: "奥术模拟",
            },
          },
        },
        {
          name: "第5-6节",
          dayData: {
            "2023-10-28": {
              type: 3,
              name: "王鹏",
              subject: "新闻播报",
            },
            "2023-10-29": {
              type: 4,
              name: "王鹏",
              subject: "新闻播报",
            },
          },
        },
      ],
}
},
  computed: {
    tableOldData() {
      const oldData = [];
      this.dateTable.forEach((item) => {
        const newItem = { ...item };
        const dayData = newItem.dayData;
        newItem.dayData = {};
        this.visibleCalendar.forEach((item) => {
          let oldDate = item.date;
          if (dayData[oldDate]) {
            newItem.dayData[oldDate] = dayData[oldDate];
          } else {
            newItem.dayData[oldDate] = {};
          }
        });
        oldData.push(newItem);
      });
      return oldData;
    },
  },
  methods: {
    typeStatistics(index) {
      const status = ["出勤", "迟到", "旷课", "早退", "请假"];
      return status[index] || "";
    },
    colorType(index) {
      const colors = ["#6BC25E", "#F0A55C", "#E77575", "#F0A55C", "#6FBFF1"];
      return colors[index] || "";
    },
}
</script>

tableOldData是表格上最终要渲染的数据源；visibleCalendar是返回的表头；dateTable是表头中的日期对应的全部数据。渲染的时候，根据visibleCalendar里的日期去找对应的值。

2.2、拿到每个日期对应的列数据

<el-table
style="width: 100%"
:data="getValues"
:show-header="false"
border>
            <el-table-column fixed width="120" align="center">
              <template slot-scope="{ row }">
                <div class="cell_header">
                  {{ row.title }}
                </div>
              </template>
            </el-table-column>
            <!--(拿到列数据时) 纵向垂直表头 -->
            <!-- 左侧固定，右侧列数动态变化，min-width设置宽度 -->
            <template v-for="(item, i) in getHeaders">
              <el-table-column
                v-if="item != 'title'"
                :show-overflow-tooltip="true"
                :label="item"
                :key="i"
                min-width="174"
                align="center"
              >
                <template slot-scope="{ row }">
                  <div class="cell_boxs" v-if="row[item] && row[item].name">
                    <div class="cell_tops">
                      <span
                        :style="'background-color:' + colorType(row[item].type)"
                        class="circle"
                      ></span>
                      <span>{{ typeStatistics(row[item].type) }}</span>
                    </div>
                    <div class="cell_bottom">
                      <span>{{ row[item].subject }}</span>
                      <span>{{ row[item].name }}</span>
                    </div>
                  </div>
                  <div class="cell_header" v-else>
                    {{ row[`value${i - 1}`] }}
                  </div>
                </template>
              </el-table-column>
            </template>
</el-table>
<script>
data() {
   return {
       headers: [
        {
          prop: "date",
          label: "课节",
        },
        {
          prop: "one",
          label: "第1-2节",
        },
        {
          prop: "two",
          label: "第3-4节",
        },
        {
          prop: "three",
          label: "第5-6节",
        },
        {
          prop: "four",
          label: "第7-8节",
        },
        {
          prop: "five",
          label: "第9-10节",
        },
      ],
    otherDatas: [
        {
          date: "2023-10-25",
          one: { type: 1, name: "赵翔1", subject: "英语写作基础" },
        },
        {
          date: "2023-10-26",
          three: { type: 2, name: "赵翔6", subject: "英语写作基础" },
        },
        {
          date: "2023-10-27",
          one: { type: 3, name: "赵翔7", subject: "英语写作基础" },
        },
        {
          date: "2023-10-28",
          one: { type: 4, name: "赵翔7", subject: "英语写作基础" },
          two: { type: 1, name: "赵翔8", subject: "英语写作基础" },
          three: { type: 2, name: "赵翔9", subject: "英语写作基础" },
        },
      ],
}
},
  computed: {
    getHeaders() {
      return this.otherDatas.reduce(
        //对数组累积操作
        (pre, cur, index) => pre.concat(`value${index}`),
        ["title"]
      );
    },
    getValues() {
      return this.headers.map((item) => {
        return this.otherDatas.reduce(
          (pre, cur, index) =>
            Object.assign(pre, { ["value" + index]: cur[item.prop] }),
          { title: item.label }
        );
      });
    },
  },
  methods: {
    typeStatistics(index) {
      const status = ["出勤", "迟到", "旷课", "早退", "请假"];
      return status[index] || "";
    },
    colorType(index) {
      const colors = ["#6BC25E", "#F0A55C", "#E77575", "#F0A55C", "#6FBFF1"];
      return colors[index] || "";
    },
}
</script>

通过headers这个数组确定要组装的数据源otherDatas格式，这样出来的数据每一行就是表格的row了。

第二种格式数据参考博客：el-table 纵向垂直表头_el-table纵向表头_wh4834的博客-CSDN博客