The table in ant design vue specifies the format rendering mode

Note: The defined columns1 must be written in data, otherwise the rendering function will not be recognized due to the rendering order during loading

Rendering Method 1:

Specify the rendering function:

const columns = [
   {
    title: ' Rank ',
    dataIndex: 'key',
    customRender: renderContent //  Rules for rendering functions 
   }, {
    title: ' Search keywords ',
    dataIndex: 'keyword',
    customRender: (text, row, index) => {
      if (index < 4) { //  Front 4 Row data to a The form of the label is rendered 
       return <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>
      }
      return { //  Otherwise, it will be monopolized 4 The text form of the column is rendered 
       children: text,
       attrs: {
        colSpan: 4
       }
      }
    }
   }
]
const renderContent = (value, row, index) => {
 const obj = {
  children: value,
  attrs: {}
 }
 return obj
}

Rendering Method 2:

Call the corresponding slot template directly:

<a-table :columns="columns" :dataSource="data" :pagination='pagination'>
  <template slot="operation">
    <a-select placeholder=" Select operation " style="width: 100%" @change="listHandleChange">
     <a-select-option value="1"> Project progress </a-select-option>
     <a-select-option value="2"> Quality control </a-select-option>
     <a-select-option value="3"> Operation and maintenance monitoring </a-select-option>
    </a-select>
  </template>
  <template slot='progress' slot-scope="text,record">
     <span>{{text}}</span>
     <span v-if='record.progressstatus'><a-icon class='arrow-up' type="arrow-up" />    </span>
     <span v-if='!record.progressstatus'><a-icon class='arrow-down' type="arrow-down" /></span>
  </template>
</a-table>
 
const columns = [
   {
    title: ' Numbering ',
    dataIndex: 'number',
    customRender: renderContent
   }, {
    title: ' Project name ',
    dataIndex: 'name',
    customRender: (text, row, index) => {
     return {
      children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" >{text}</a>,
      attrs: {}
     }
    } 
   }, {
    title: ' Project progress ',
    dataIndex: 'progress',
    scopedSlots: { customRender: 'progress' } //  The corresponding in the template slot-scope Can be used to pass parameters, where the 1 Parameters are the values corresponding to the current field progress , No. 2 Parameters are all value objects corresponding to the current field , That is, the whole data[n]
   }, {
    title: ' Operation ',
    dataIndex: 'operate',
    scopedSlots: { customRender: 'operation' } //  The direct corresponding slot name is operation Template of 
   }
]
 
const data = [
  {
  key: 6,
  number: 6,
  name: ' Athena ',
  progress: '88%',
  progressstatus: 1
 }
]

Supplementary knowledge: Ant design vue framework, 1 pit of customRow usage in table control

Today, when writing code, use the Ant design framework < a-table > Control, one of the requirements is: click on a line in table, and you need to perform one action. Because there is no default row click event, customRow is needed for customization.

This method, in the official document, has instructions for use, as follows:

<Table
 customRow={(record) => {
  return {
   props: {
    xxx... // Attribute 
   },
   on: { //  Events 
    click: (event) => {},    //  Click line 
    dblclick: (event) => {},
    contextmenu: (event) => {},
    mouseenter: (event) => {}, //  Move the mouse into the line 
    mouseleave: (event) => {}
   },

  };
 )}
 customHeaderRow={(column) => {
  return {
   on: {
    click: () => {},    //  Click the header row 
   }
  };
 )}
/>

The official writing should belong to the grammar of lamada, which is also used when I use it today.

As follows:

methods:{
 getDetailList(id){
  // Perform specific actions 
  },
 rowClick: (record, index) => ({
    //  Events 
    on: {
     click: event => {
      //  What to do when you click on the line 
      console.log('record', record)
      console.log('index', index)
      console.log('event', event)
      this.getDetailList(record.id) // This 1 Guild report error, report undefined 
     }
    }
   })
  }

During execution, an error will be reported as follows:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'getDetailList' of undefined".

Without the lamada expression, this problem will not occur, and the modified rowClick method is as follows:

rowClick(record, index) {
   return {
    on: {
     click: () => {
      console.log(record, index)
      this.getDetailList(record.matbillid)
     }
    }
   }
  },

It can execute normally and call getDetailList method correctly