ElementUI中table使用render/jsx渲染

在使用elemenUI的table的时候,为了项目的样式统一我对tabel进行了简单的封装, 主要通过传入data以及columns来渲染table.

  <el-table
              ref="table"
              highlight-current-row
              tooltip-effect="dark"
              :align="options.align"
              :row-style="options.rowStyle"
              :data="tableData"
              style="width: 100%"
            >
              <template v-for="(col, i) in columns">
                <el-table-column
                  :prop="col.key"
                  :key="col.key + i"
                  :label="col.label"
                  :width="col.width"
                  :align="options.align"
                  :fixed="col.fixed"
                  :show-overflow-tooltip="col.showOverflowTooltip"
                >
                  <template slot-scope="scope">
                    <span v-if="col.type === 'select'">
                      <el-checkbox
                        v-if="scope.row.canReallocate"
                        :label="scope.row.id"
                        @change="handleCheckedCitiesChange"
                      >
                        <span
                          :style="{color: setColor(col, scope.row)}"
                        >{{customText(col, scope.row)}}</span>
                      </el-checkbox>

通过if判断el-table-column的类型,但是有时候碰见复杂的需求,这种方式是不现实的,因为我们不可能去判断所有的类型. 这个时候用render/jsx去插入slot的方式渲染就再合适不过了.

image.png

比如这种需求, 渲染一个label + 一个icon + 一个弹出框, 弹出框内容是根据当前行的数据渲染出来对的.

     <!-- renderHtml -->
    // 在循环column的时候 判断类型是否是render类型, 如果是则执行renderToHtml方法,
  // renderToHtml方法是在当前实例插入slot,具名slot的名称对应循环中的名称
    <span  v-else-if="col.type === 'renderHtml'">
           {{ renderToHtml(col, scope.row) }}
           <slot :name="col.renderName"></slot>
    </span>
    // slot - renderToHtml
    renderToHtml(col, row) {
      if (typeof col.render === 'function') {
        this.$slots[col.renderName] = [col.render(row)]
        return
      }
      return
    }

我们在初始化columns的时候声明类型,以及render函数, 返回VNode节点.

image.png

  // 此处是jsx写法
  // 我们可以很简单的在此处根据不同的条件,定义出不同的样式
    renderHtml(h, row) {
      const label = row.label
      const k = label.split(',')
      k[1] = k[1].replace(/\|/g, ',')

      let color = '#2c2e3e'
      if (Number(row.taskStatus) === 172006) {
        color = '#EC3F30'
      }
      if (!row.label) {
        return <span>-</span>
      }
      if (Number(row.taskStatus) === 172004 && k[1].length > 4) {
        return <div>
          <span style={{ color: color }}>{k[0]}</span>
          <span style={{ marginLeft: '5px', color: '#929AAC' }}>{k[1].substring(0, 4)}</span>
          <el-tooltip effect='light' placement='top'>
            <div slot='content'>{k[1]}</div>
            <span style={{ color: '#929AAC' }}>...</span>
          </el-tooltip>
        </div>
      }
      return <div>
        <span style={{ color: color }}>{k[0]}</span>
        <span v-show={k[1]} style={{ marginLeft: '5px', color: '#929AAC' }}>{k[1]}</span>
      </div>
    },

    // 原生vue的render写法, 同样有这种效果
    render(row) {
      // computeType    integer($int32)
      // 1：剩余天数，2：里程,3：厚度，4：到期时间
      // allotType  integer($int32)
      // 分配对象 1:对应SA，2：招揽专员
      // satisfyAllConditions   string
      // 是否满足所有条件(1:是,2:否 满足任意一个)
      // kpiItemBaseId
      const s = []
      if (row.satisfyAllConditions === 1) {
        s.push({
          title: '同时满足'
        })
      } else {
        s.push({
          title: '满足任意一个'
        })
      }
      row.conditions.length && row.conditions.forEach(v => {
        if (v.computeType === 1) {
          s.push(['剩余天数', `${v.minVal}-${v.maxVal}天`, v.kpiName])
        }
        if (v.computeType === 2) {
          s.push(['剩余里程', `${v.minVal}-${v.maxVal}KM`, v.kpiName])
        }
        if (v.computeType === 3) {
          s.push(['剩余厚度', `${v.minVal}-${v.maxVal}mm`, v.kpiName])
        }
        if (v.computeType === 4) {
          s.push(['到期时间', `${moment(v.minVal).format('YY/MM/DD')} - ${moment(v.maxVal).format('YY/MM/DD')}`, v.kpiName])
        }
      })
      if (row.allotType === 1) {
        s.push({
          title: '对应SA'
        })
      } else {
        s.push({
          title: '招揽专员'
        })
      }
      let _dom, _style, _innerText, _class
      return this.$createElement(
        'div', s.map((keys, i) => {
          if (i === 0) {
            _dom = 'i'
            _innerText = `   ${keys.title}`
            _class = 'el-icon-refresh'
            _style = {
              fontSize: '12px',
              color: '#2C2E3E',
              display: 'block'
            }
          } else if (Array.isArray(keys)) {
            _dom = 'div'
            _innerText = `${keys[2]}:  ${keys[0]} ${keys[1]}`
            _class = ''
          } else {
            _dom = 'div'
            _innerText = `分配对象 : ${keys['title']}`
            _class = ''
          }

          if (i === 0) {
            _style = {
              fontSize: '12px',
              fontWeight: '600',
              color: '#2C2E3E',
              margin: '5px 0',
              fontFamily: 'PingFangSC-Medium,PingFang SC'
            }
          } else if (i === s.length - 1) {
            _style = {
              fontSize: '12px',
              fontWeight: '400',
              color: '#2C2E3E',
              marginTop: '10px',
              fontFamily: 'PingFangSC-Medium,PingFang SC'
            }
          } else {
            _style = {
              fontSize: '12px',
              fontWeight: '400',
              color: '#2C2E3E',
              margin: '3px 0',
              fontFamily: 'PingFangSC-Medium,PingFang SC'
            }
          }
          return this.$createElement(_dom, {
            class: _class,
            style: _style,
            domProps: {
              innerHTML: _innerText
            }
          })
        })
      )
    },