Element 动态表头渲染表格

element 中的table表头动态渲染

https://blog.csdn.net/heixiuheixiu666/article/details/104705024/

Element 动态表头渲染表格

https://qiaoyajun.blog.csdn.net/article/details/90552744?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格

https://blog.csdn.net/weixin_43714266/article/details/90644450?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-7.no_search_link

vue element 中的table动态渲染实现（动态表头）

https://www.jb51.net/article/174739.htm

 

/* eslint-disable handle-callback-err */
<template>
  <div class="app-container">
    <h2 style="text-align:center">{{ checktitle }}({{ checkTime }})</h2>
    <p style="text-align:right">考核对象：{{ person }} &nbsp;所属组织：{{ company }}</p>
    <div style="display:flex; justify-content: space-between; margin-bottom:20px">
      <span style="color:#3c99dc; font-size:16px" />
      <div style="position: relative; height: 26px; right:0;">
        <ct-button v-if="addFlag === '1'" size="mini" @click="addLine">新增指标</ct-button>
        <ct-button type="save" size="mini" @click="dosave">暂存</ct-button>
        <ct-button type="submit" size="mini" @click="submit">提交</ct-button>
        <ct-button size="mini" @click="goback">返回</ct-button>
      </div>
    </div>

    <div v-cloak class="table-wrapper">
      <div class="work-task">
        <div class="left-title">工作任务</div>
        <div class="right-contnet">
          <el-table
            style=" 100%"
            border
            :data="tableList"
            :header-cell-style="{background:'#fff', color:'#555', fontWeight: 'normal'}"
          >
            <el-table-column
              v-for="(item, index) in tableLabels"
              :key="index"
              :property="item.colId"
              :width="item.colWidth"
              align="center"
              :label="item.colName"
            >
              <template slot-scope="scope">
                <div v-if="!scope.row.canEdit && !item.editable">
                  <span>{{ scope.row[scope.column.property] }}</span>
                </div>
                <div v-if="scope.row.canEdit || item.editable">
                  <el-input
                    v-if="item.colType === '4'"
                    v-model="scope.row[scope.column.property]"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                  />
                  <el-input
                    v-else-if="item.colType === '0'"
                    v-model="scope.row[scope.column.property]"
                    placeholder="请输入内容"
                  />
                  <el-input
                    v-else-if="item.colType === '1' || item.colType === '3'"
                    v-model.number="scope.row[scope.column.property]"
                    placeholder="请输入评分"
                    @blur="check(scope.row[scope.column.property])"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="61">
              <template slot-scope="scope">
                <el-button v-if="scope.row.canEdit" type="text" @click.native.prevent="deleteRow(scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="total-score">
        <div class="left-title">总分</div>
        <div class="right-content">
          <div
            v-for="(item, index) in totalObjList"
            :key="index"
            class="table-item"
            :style="styleObject(item)"
          >{{ item.value }}</div>
          <div class="last" />
        </div>
      </div>
      <div class="assess-option">
        <div class="left-title">考核意见</div>
        <div class="right-content">
          <div v-for="(item, index) in commentList" :key="index" class="comment-item">
            <span class="task-name">{{ item.taskName }}</span>
            <span class="user-name"> 操作人：{{ item.userName }}</span>
            <span class="end-time">日期：{{ item.endTime }}</span>
            <span class="comment">意见：{{ item.comment }}</span>
          </div>
        </div>
      </div>
    </div>

    <div v-if="submitDialogVisible">
      <el-dialog
        title="考核审批"
        :visible.sync="submitDialogVisible"
        width="30%"
        class="dialog-style"
      >
        <submit-form
          :process-id="$route.query.processId"
          :node-id="nodeId"
          :table-list="tableList"
          @after-submit="afterSubmit"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { queryTaskInfo, tempStorage } from '@/api/period/workflow'
import SubmitForm from '@/views/workflow/submitForm'
export default {
  components: {
    SubmitForm
  },
  data() {
    return {
      checktitle: '',
      checkTime: '',
      person: '',
      company: '',

      tableLabels: [],
      tableList: [],
      commentList: [],
      totalScores: [],
      totalObj: {},

      scoreLists: [],
      submitDialogVisible: false,
      weightScore: 0,
      nodeId: '',

      totalObjList: [],
      addFlag: false
    }
  },
  computed: {
    styleObject() {
      return (item) => {
        if (item.width) {
          return {
            flexGrow: 0,
            flexShrink: 0,
            flexBasis: item.width + 'px'
          }
        } else {
          return {
            flexGrow: 1,
            flexShrink: 1,
            flexBasis: 0
          }
        }
      }
    }
  },
  watch: {
    tableList: {
      deep: true,
      handler(val, oldVal) {
        this.computedTotal()
      }
    }
  },
  created() {
    this.queryTask()
  },
  methods: {
    queryTask() {
      const query = {
        processId: this.$route.query.processId,
        nodeId: this.$route.query.nodeId
      }
      queryTaskInfo(query).then(res => {
        this.tableLabels = res.data.headers
        this.tableList = res.data.tableDatas
        this.commentList = res.data.comments
        this.checktitle = res.data.title
        this.checkTime = res.data.time
        this.person = res.data.currentUserName
        this.company = res.data.orgName
        this.nodeId = res.data.nodeId
        this.addFlag = res.data.nodeSet.addDataFlag
        this.computedTotal()
      })
    },
    computedTotal() {
      this.totalObjList = []
      const scoreData = []
      if (this.tableList.length === 0) {
        for (let i = 0; i < this.tableLabels.length; i++) {
          const item1 = this.tableLabels[i]
          if (item1.colType === '0' || item1.colType === '4') {
            scoreData.push({
              [item1.colId]: ''
            })
          } else {
            scoreData.push({
              [item1.colId]: 0
            })
          }
        }

        scoreData.forEach(item => {
          for (const key in item) {
            this.totalObjList.push({
              nodeId: key,
              value: item[key]
            })
          }
        })
        this.totalObjList.forEach((item, index) => {
          item['width'] = this.tableLabels[index].colWidth
        })
      } else if (this.tableList.length > 0) {
        for (let i = 0; i < this.tableLabels.length; i++) {
          const item1 = this.tableLabels[i]
          for (let j = 0; j < this.tableList.length; j++) {
            const item2 = this.tableList[j]
            if (item1.colType === '0' || item1.colType === '4') {
              scoreData.push({
                [item1.colId]: ''
              })
            } else {
              scoreData.push({
                [item1.colId]: item2[item1.colId]
              })
            }
          }
        }

        this.scoreLists = []
        scoreData.map(item => {
          for (const key in item) {
            this.scoreLists.length ? this.addArr(this.scoreLists, item, key) : this.scoreLists.push(item)
          }
        })

        this.totalObjList = []
        this.scoreLists.forEach(item => {
          for (const key in item) {
            this.totalObjList.push({
              nodeId: key,
              value: item[key]
            })
          }
        })
        this.totalObjList.forEach((item, index) => {
          item['width'] = this.tableLabels[index].colWidth
        })
      }
    },
    addArr(newArr, value, key) {
      newArr.map(newVal => {
        if (newVal[key] || newArr.some(item => item.hasOwnProperty(key))) {
          if (newVal[key] || newVal[key] === 0) {
            newVal[key] = value[key] + newVal[key]
          }
        } else {
          newArr.push(value)
        }
      })
      return newArr
    },
    addLine() {
      const obj = {
        canEdit: true,
        rowNo: this.tableList.length
      }
      this.tableLabels.forEach(item => {
        if (item.colType === '0' || item.colType === '4') {
          obj[item.colId] = ''
        } else {
          obj[item.colId] = 0
        }
      })
      this.tableList.push(obj)
    },
    deleteRow(item) {
      const index = this.tableList.indexOf(item)
      this.tableList.splice(index, 1)
    },
    goback() {
      this.$router.go(-1)
    },
    isPositiveInt(str) { // 非负整数
      var g = /^[1-9]d*|0$/
      return g.test(str)
    },
    check(val) {
      if (val && !this.isPositiveInt(val)) {
        this.$message({
          message: '分数只能为非负整数',
          type: 'warning'
        })
      }
    },
    dosave() {
      if (this.tableList.length === 0) {
        this.$message({
          message: '至少填写一条指标',
          type: 'warning'
        })
        return
      }
      // this.tableList.forEach(item => {
      //   delete item.canEdit
      // })
      const query = {
        processId: this.$route.query.processId,
        nodeId: this.nodeId,
        rows: this.tableList
      }
      tempStorage(query).then(res => {
        if (res.code === 1) {
          this.$message({
            message: '暂存成功',
            type: 'success'
          })
        }
      }).catch(err => {
        this.$message({
          message: err,
          type: 'warning'
        })
      })
    },
    submit() {
      this.scoreLists.forEach((item, index) => {
        if (this.tableLabels[index].colName === '权重') {
          for (const key in item) {
            this.weightScore = item[key]
          }
        }
      })

      if (this.weightScore !== 100) {
        this.$message({
          message: '权重总分必须为100',
          type: 'warning'
        })
        return
      }
      let confirmMsg = '确定提交吗?'

      for (let k = 0; k < this.tableList.length; k++) {
        const tableItem = this.tableList[k]
        for (const g in tableItem) {
          if (g !== ('rowNo' || 'adId') && !isNaN(tableItem[g]) && tableItem[g] === 0) {
            confirmMsg = '存在评分为0，确定提交吗?'
          }
        }
      }

      this.$confirm(confirmMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDialogVisible = true
      }).catch((err) => {
        console.log(err)
      })
    },
    afterSubmit() {
      this.submitDialogVisible = false
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
[v-cloak]{
  display: none !important;
}

$borderColor: #d2d2d2;
/deep/ .el-table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
/deep/ .el-table td,
/deep/ .el-table th.is-leaf {
  border-bottom: 1px solid $borderColor;
}
/deep/ .el-table--border td,
/deep/ .el-table--border th,
/deep/ .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: 1px solid $borderColor;
}

/deep/ .el-table--border,
/deep/ .el-table--group {
  border: 1px solid $borderColor;
  border-bottom: 0 none;
}
.table-wrapper {
  margin-top: 20px;
  font-size: 14px;
  color: #606266;
  .left-title {
      flex: 0 0 160px;
      border-left: 1px solid $borderColor;
      border-top: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  .work-task {
    display: flex;
    .right-contnet {
       overflow: hidden;
      flex: 1;
      .el-table {
         100%;
      }
      /deep/ .el-table tbody tr:hover > td {
        background-color: transparent !important;
      }
    }
    .table-header {
      display: flex;
    }
  }
  .total-score {
    display: flex;
    .left-title {
       160px;
      height: 48px;
      border-top: none;
      border-right: 1px solid $borderColor;
    }
    .right-content {
      flex: 1;
      display: flex;
      border-right: 1px solid $borderColor;
      .table-item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid $borderColor;
        border-bottom: 1px solid $borderColor;
        position: relative;
        left: 1px;
      }
      .last {
         61px;
        border-bottom: 1px solid $borderColor;
      }
    }
  }

  .assess-option {
     display: flex;
    .left-title {
       160px;
      min-height: 48px;
      border-top: none;
      border-right: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
    }
    .right-content {
      flex: 1;
      line-height: 24px;
      padding: 10px;
      border-right: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
      .comment-item {
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0;
        }
      }
      .task-name {
        margin-right: 20px;
      }
      .user-name {
        margin-right: 20px;
      }
      .end-time {
         margin-right: 20px;
      }
    }
  }
}
</style>