element——table使用表格形式给员工排班

功能清单

• 给每个老人在某个月排班
• 点击日期选中取消
• 服务对象和员工列做筛选
• 当月天数动态
• 服务次数根据选中个数动态生成，使用深度监听
• 每个单元格点击事件改变源数据

<template>
  <div>
    <el-table
      @cell-click="clickCell"
      border
      :data="tableData"
      style="width: 100%"
      size="small"
    >
      <!-- 在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法 -->
      <el-table-column
        prop="date"
        label="服务对象"
        width="100"
        align="center"
        :filters="olderArr"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="员工"
        width="100"
        align="center"
        :filters="staffArr"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column prop="num" width="80" label="服务次数" align="center">
        <template slot-scope="scope">
          <div class="red bold">{{ scope.row.num }}</div>
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, i) in allDay"
        :key="i"
        :prop="item + ''"
        :label="item + ''"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          <i
            v-if="scope.row[item]"
            class="el-icon-star-on blue size-20 bold"
          ></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "王小虎",
          name: "王小虎1",
          address: "6",
          1: true,
          2: true,
          3: true,
          4: true,
          5: true,
          6: false,
          7: false,
          8: false,
        },
        {
          date: "王虎",
          name: "王小1",
          address: "6",
          1: false,
          2: false,
          3: false,
          4: false,
          5: false,
          6: true,
          7: true,
          8: true,
        },
      ],
      olderArr: [], // 服务对象过滤列表
      staffArr: [], // 员工过滤列表
      allDay: 30, // 当前月总天数
    };
  },
  watch: {
    // 监听表格数据变化，动态渲染服务次数
    tableData: {
      handler(newName, oldName) {
        console.log(newName);
        newName.forEach((item) => {
          let arr = Object.values(item).filter((el) => {
            return el == true;
          });
          item.num = arr.length + " / " + item.address;
        });
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    init() {
      // 通过源数据获取服务对象和员工的过滤列表
      // 获取当前月的总天数
      let arr1 = [];
      let arr2 = [];
      this.tableData.forEach((item) => {
        arr1.push({
          text: item.date,
          value: item.date,
        });
        arr2.push({
          text: item.name,
          value: item.name,
        });
        let arr3 = Object.values(item).filter((el) => {
          return el == true || el == false;
        });
        this.allDay = arr3.length;
      });
      this.olderArr = arr1;
      this.staffArr = arr2;
    },
    clickCell(row, column, cell, event) {
      // console.log(1, row);
      // console.log(2, column, row[column.label]);
      row[column.label] = !row[column.label];
      // console.log(this.tableData);
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
  },
};
</script>
<style lang="scss" scoped></style>