Vue生成类似于打卡页面

数据表格

    <el-table :data="tableData" border height="calc(100vh - 240px)" :cell-style="cellFun"><el-table-column label="姓名" show-overflow-tooltip prop="name" align="center"/><el-table-column label="手机号" show-overflow-tooltip prop="phone" align="center"/><el-table-column label="性别" show-overflow-tooltip prop="sex" align="center"/><el-table-column v-for="(item,index) in columns" :key="index"             :label="''+item.label+''" :prop="item.name"  align="center" width="40"><template slot-scope="scope"></template></el-table-column></el-table><pagination :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"             :total="total" @pagination="loadData"/>

设置单元格样式的方法

如果内部值大于0，则显示背景为绿色

    cellFun({row, column, rowIndex, columnIndex}) {if (columnIndex != 0 && columnIndex != 1) {let key = column.propertyif (row[key] > 0) {return {backgroundColor: '#65b00d'}}}},

数据加载的方法

//      queryParams: {  //参数
//        projectId: '',
//        yearMonthBy: '',
//        pageNum:1,
//        pageSize:10
//      },    //数据加载loadData() {getList(this.queryParams).then(res => {/**动态列的创建*/let date = new Date(this.queryParams.yearMonthBy)let days = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()this.columns = []// let dates = []//根据所选的年月生成具体的天数据for (let i = 1; i <= days; i++) {let m = date.getMonth() + 1let time = date.getFullYear() + '-' + (m > 9 ? m : '0' + m) + '-' + (i > 9 ? i : '0' + i)this.columns.push({label: i, name: 'a' + i, date: time})// dates.push(date.getFullYear() + '-' + (m > 9 ? m : '0' + m) + '-' + (i + 1 > 9 ? i : '0' + i))}console.log(this.columns)/**end*/const data = res.rows/**补全每条数据*/for (let i = 0; i < data.length; i++) {for (let j = 0; j < this.columns.length; j++) {data[i][this.columns[j].name] = 0}}/**end*//**数据匹配*///这里逻辑可以跟随自己的变更，usedDates就是你打卡的日期字符串//例如"2022-01-01","2022-01-02"for (let i = 0; i < data.length; i++) {if (data[i].usedDates) {const usedDateList = data[i].usedDates.split(",");for (let j = 0; j < usedDateList.length; j++) {for (let k = 0; k < this.columns.length; k++) {if (usedDateList[j] == this.columns[k].date) {data[i][this.columns[k].name] = 1break}}}}}/***/console.log(data)this.tableData = datathis.total = res.total})},