ant-design-vue 自定义表格单元格内容

对于动态生成的表格单元格，我们需要自定义单元格内容,主要用到customCell和customRender函数 遵循[Vue jsx]语法。

1. customCell 主要用来设置单元格属性。例如单元格背景色，单元格单双击，拖拽等行为

2. customRender 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格行/列合并, 以及表格行/列合并

columns =[
{
  title: '星期一',
  dataIndex: 'mon',
  scopedSlots: { customRender: 'mon' },
  align: 'center',
  customCell: (record, rowIndex) => {
    return {
      style: {
        'cursor': 'pointer',
        'position': 'relative',
        'color': record.mon.months ? 'red' : ''
      },
      on: {
        dblclick: () => {
          if (record['mon'].title) {
            this.visible = true
            this.currentObj = record['mon']
            setTimeout(() => {
              this.form.setFieldsValue({
                id: null,
                content: null
              })
            }, 100)
          }},
        click:()=>{},
        dragstart: () => {},  
        dragover:()=>{},
        dragend:()=>{}
      }]
      },
 customRender:(text,record,index)=>{

    const obj = {
      children: text,
      attrs: {},
      bank_btn1: text.content.jxcdId == null ? 'color: darkgrey;font-weight: 600' : 'color: green;font-weight: 600',
      jxcdmc: text.content.jxcdmc == null ? '未安排场地' : text.content.jxcdmc,
      kcmc: text.content.kcmc,
      delete: (id) => {
        this.deleteCourse(id)
      },
      arrange: (item) => {
        this.$refs.editForm.edit(item)
      },
      dragStart: (item) => {
        this.dragFrom = item
      }
    }

const colsIndex = []

if (text.content.children && text.content.children.length > 0) {
  obj.children = (
    <div class='container_td'>
      {text.content.children.map((item) => (
        <div class='item_box myClass' draggable='true' ondragstart={() => { obj.dragStart(item) }}>
          <a-icon type='close-circle' style='cursor:pointer' onClick={() => { obj.delete(item.id) }} class='check_btn'/>
          <a-icon type='home' style='cursor:pointer;font-size:14px' onClick={() => { obj.arrange(item) }} class='home_btn' />
          <a-icon type='schedule' style='color:#1890ff;font-size:16px' className='check_btn'/>
          <div class='item_right_box'>
            <div className='right_cell'>
              <span onClick={() => { obj.arrange(item) }}> <b>场地：</b>  {item.jxcdmc ? (item.zcAndCd.map((s, i) => (
                <p style='margin:0'>{i + 1}、{s.jsmc} &nbsp;({sortarr(s.zc.split(','))})</p>
              ))) : <b>未安排</b>}
              </span>
            </div>
          </div>
        </div>

      ))}
    </div>
)

// 合并单元格操作。注意合并的单元格设置之后，被合并的其他单元格设置0

obj.attrs.rowSpan = text.content.rows
if (text.content.section.length > 1) {
  for (let f = 0; f < text.content.section.length; f++) {
    if (f > 0) {
      colsIndex.push(text.content.section[f] - 1)
    }
  }
}
if (colsIndex.length > 0) {
  if (colsIndex.includes(index)) {
    obj.attrs.colSpan = 0
  }
}

} else if (this.dragTarget && !text.content.disabled && (this.dragTarget.section === record.section)) {
  if (this.dragTarget.value === days[i].value) {
    obj.children = (<div class= 'readyRectangle' class={this.showReady(text.content) ? 'ready' : ''} />)
  }
} else {
}
return obj

 }