el-table动态表格赋值任意单元格文本

最新推荐文章于 2025-07-31 16:48:39 发布

北海军

最新推荐文章于 2025-07-31 16:48:39 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： element

本文链接：https://blog.youkuaiyun.com/qq_39237755/article/details/83268749

element 专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何在 Element UI 的表格组件中实现动态样式设置与交互处理，包括根据特定条件改变单元格背景色及响应点击事件，触发不同类型的对话框。通过示例代码展示了如何使用 Vue.js 的计算属性和事件监听来实现这一功能。

<el-table
  class='mt10' type="selection" :data="tableData" border :cell-class-name="rowClass" ref="tables"
  @cell-click="cellClick">
  <TableSimpleCol
    v-for="(item, index) in colList" :key="index" :id="index"
    v-bind="item">
  </TableSimpleCol>
</el-table>

 
rowClass ({row, column, rowIndex, columnIndex}) {
        if (this.subjectTwoConcatObjArr.length > 0) {
          for (let k = 0; k < this.subjectTwoConcatObjArr.length; k++) {
            if (this.subjectTwoConcatObjArr[k].customerName) {
              this.tableData[this.subjectTwoConcatObjArr[k].rowIndex][this.subjectTwoConcatObjArr[k].props] = this.subjectTwoConcatObjArr[k].customerName
// this.table[3].yyy = ‘动态赋值文本’    // 3为横坐标，yyy为后台对应纵坐标字段
            } else {
              this.tableData[this.subjectTwoConcatObjArr[k].rowIndex][this.subjectTwoConcatObjArr[k].props] = '+'
            }
            if (this.subjectTwoConcatObjArr[k].type === 2) {
              if (rowIndex === this.subjectTwoConcatObjArr[k].rowIndex && columnIndex === this.subjectTwoConcatObjArr[k].columnIndex) {
                return 'bacColorf4984e' // 科目二对应下面样式显示不同颜色
              }
            } else if (this.subjectTwoConcatObjArr[k].type === 3) {
              if (rowIndex === this.subjectTwoConcatObjArr[k].rowIndex && columnIndex === this.subjectTwoConcatObjArr[k].columnIndex) {
                return 'bacColor317eb0' // 科目三
              }
            } else if (this.subjectTwoConcatObjArr[k].type === 5) {
              if (rowIndex === this.subjectTwoConcatObjArr[k].rowIndex && columnIndex === this.subjectTwoConcatObjArr[k].columnIndex) {
                return 'rgb196'
              }
            }
          }
        }
      },
      cellClick (row, column, cell, event) {
        if (cell.className.indexOf('rgb196') !== -1 || cell.className.indexOf('bacColor317eb0') !== -1 || cell.className.indexOf('bacColorf4984e') !== -1) {
          this.customerNameArr = []
          let find = this.formList.find(item => item.prop === 'customerId')
          this.$set(find, 'optList', [])
          let carId = Number(column.property.split('f')[1])
          let coachId = Number(column.property.split('f')[2])
          let timeId = row.id
          let timeList = this.ajaxData['odts'].find(item => item.id === timeId)
          let filterList = this.ajaxData['cas'].find(item => item.carId === carId && item.coachId === coachId && item.beginTime === timeList.beginTime && item.endTime === timeList.endTime)
          this.tmpData.id = filterList.id
          this.tmpData.names = event.target.innerText
          if (cell.className.indexOf('rgb196') !== -1) {
            this.showDialog = 3
            this.tmpData.type = ''
            this.dialogOpen()
          } else if (cell.className.indexOf('bacColor317eb0') !== -1) { // 科三
            this.showDialog = 2
            this.tmpData.type = 3
            this.dialogOpen()
          } else if (cell.className.indexOf('bacColorf4984e') !== -1) { // 科目二
            this.showDialog = 1
            this.tmpData.type = 2
            this.dialogOpen()
          }
        }
      }
    
    
    }
  }
</script>

<style rel="stylesheet/scss" type="text/scss" lang="scss">
  .TraineeManagement {
    .rgb196 {
      background: rgb(196, 196, 196) !important;
    }
    .bacColor317eb0 {
      background: #317eb0 !important;
    }
    .bacColorf4984e {
      background: #f4984e !important;
    }
    tr:hover {
      background: #fff;
    }
  }
</style>