el-mentUI el-table自定義表頭

阿新 • • 發佈：2020-12-25

一、自定義el-select

1.dom

<el-table
  :data="tableData"
  style="min-height:700px; margin-left:10px;width:98%;"
>
  <el-table-column
    label="AA"
    min-width="230"
    :prop="aStr"
    :render-header="renderCustomAttributionHeader"
    align="center"
  ></el-table-column>
  <el-table-column
    label 
="BB"
    min-width="230"
    :prop="ctr"
    :render-header="renderCustomAttributionHeader"
    align="center"
  ></el-table-column>
  <el-table-column
    label="CC"
    min-width="230"
    :prop="cStr"
    :render-header="renderCustomAttributionHeader"
    align="center"
  ></el-table-column>
</el-table>

2. data資料

  data () {
    return {
      joinStr: '&-&', // 拼接字串
      lastSelectParams: '', // 最後一次下拉選擇
      aStr: 'aStr', // a
      aList: [],
      aValue: '', // a狀態繫結值
      bStr: 'bStr', // b
      bValue: '', // b繫結值
      bList: [],
      cStr: 'cStr', // c
      cValue: '', // c繫結值
      cList: [],
      queryParams: {aType:  
'', bType: '', cType: ''}
    }
  },

3.實現方法

  methods: {
    // 根據型別返回list
    listToRenderHeaderType (str) {
      let list = []
      if (str === this.aStr) {
        // a
        list = this.aList
      } else if (str === this.bStr) {
        // b
        list = this.bList
      } else if (str === this.cStr) {
        // c
        list = this.cList
      } 
      return list
    },
    // 繫結value的值
    valueToRenderHeaderType (str) {
      let value = ''
      if (str === this.aStr) {
        // a
        value = this.aValue
      } else if (str === this.bStr) {
        // b
        value = this.bValue
      } else if (str === this.cStr) {
        // c
        value = this.cValue
      }
      return value
    },
    // 自定義條線歸屬表頭JSX
    renderCustomAttributionHeader (h, { column, $index }) {
      let list = this.listToRenderHeaderType(column.property)
      let value = this.valueToRenderHeaderType(column.property)
      return (
        <div>
          <span style="display:block">{column.label}</span>
          <el-select
            filterable
            value={value}
            onChange={this.handleAttributionCommand}
            placeholder={`請選擇${column.label}`}>
            {list.map(item => {
              return (
                <el-option
                  key={item.code}
                  label={item.descStr}
                  value={`${item.code}${this.joinStr}${item.descStr}${this.joinStr}${column.property}`}>
                </el-option>
              )
            })}
          </el-select>
        </div>
      )
    },

    handleAttributionCommand (val) {
      let list = val && val.split(this.joinStr)
      let value = ''
      if (list && list.length > 2) {
        let type = list[0]
        value = list[1]
        let str = list[2]
        let params = {}
        if (this.lastSelectParams) {
          params = {
            ...this.lastSelectParams
          }
        } else {
          params = { //
            ...this.queryParams
          }
        }
        if (str === this.aStr) {
          // 條件歸屬
          params.aType = type
          this.aValue = value
        } else if (str === this.bStr) {
          // 業務型別
          params.bType = type
          this.bValue = value
        } else if (str === this.cStr) {
          // 外呼平臺
          params.cType = type
          this.cValue = value
        }
        // 呼叫請求方法
        // xxxxxxxxxxxx
        this.lastSelectParams = params
      }
    },
  }