Ant-Design-Vue used on Table component (primary)

1. How custom table column headers:

<a-table
        :columns="columns"
        :dataSource="dataSource">
        <span slot="customTitle"><a-icon type="smile-o"/>Name</span>
</a-table>

Columns = const [　　
    {　
      dataIndex The: 'name' , // custom list head, you can not set the title attribute 
      align = left: 'left' ,
       slots: {title: 'customTitle' }　　// slots is defined herein as a property, and a set title attribute 
    } 
]

The page will be rendered as follows:

 

 

2. How to set up a custom single-line style

<A- Table 
        : Columns = "Columns" 
        : the dataSource = "the dataSource"> 
        <span slot = "Action" slot-scope = "Record, index"> // value passed here are: record: the original current row data, index: the index of the current row 
          <a @click="handleEdit(record.key)"> edit </a> 
        </ span> 
</ a Table->

Columns = const [ 
    { 
      title: 'Title Menu' 
      dataIndex: 'name' , // dataIndex values corresponding to the column data in the corresponding data item Key 
      Key: 'name', 
      align = left: 'left' , 
    }, 
    { 
      title: 'operation' , 
　　　 Key: 'Action' 
      dataIndex the: 'Action' , 
      width: '30% ' ,
      scopedSlots: {customRender: ' Action '},     // this line custom renderer this row 
      align = left:' Center ' 
    } 
 ]  

Page is shown below:

 3. How to set the header, footer and border line?

< Template > 
  < A-Table : Columns = "Columns" : the dataSource = "Data" bordered > attribute // bordered added here, the border lines can be added 
    < Template slot = "name" slot-scope = "text" > 
      < a the href = "JavaScript :;" > {{text}} </ a > 
    </ Template > 
    < Template slot = "title" slot-scope = "currentPageData" > // slot = "title" header can be set up , 'title'Other values have not changed the page header 
      Header - {{ currentPageData }} // here, print it currentData, look at what value is
    </template> 
    <template slot="footer"> Footer </template>　　// 跟上同理
 </a-table> 
</template>

Columns = const [not defined // Columns header and footer of the relevant code 
    { 
      title: 'the Name' , 
      dataIndex The: 'name' , 
      scopedSlots: {customRender: 'name' }, 
    }, 
    { 
      title: 'Cash Assets ' , 
      className: ' Money-column ' , 
      dataIndex The: ' Money ' , 
    }, 
    { 
      title: ' the address' , 
      dataIndex The: 'address' , 
    }, 
  ];

Page will display the results as follows:

 4. The table shows how the tree data:

<A- Table 
    : Columns = "Columns" 
    : the dataSource = "the dataSource" 
    childrenColumnName = "QQ" herein may be selected attribute name // child node, generally for 'children', where I is set to 'qq', the effect of the test 
    : rowSelection = "rowSelection"> // rowSelection a list of selectable items when the arrangement, described later 
    <span slot = "customTitle"> <icon a-type = "Smile-O" /> the Name </ span> 
    <span = slot "Action" slot-scope = "text, Record, index"> 
       <a @click="handleEdit(record.key)"> edit </a> 
    </ span> 
</ A Table->

const columns = [
    {
      dataIndex: 'name',
      key: 'name',
      align: 'left',
      slots: { title: 'customTitle'}
    },
    {
      title: '操作',
      dataIndex: 'action',
      width: '30%',
      scopedSlots: { customRender: 'action' },
      align: 'center'
    }
  ]
  const dataSource = [
    {
      key: 1,
      name: 'John Brown SR.' , 
      Age: 60 , 
      address: 'New York No. 1 Lake Park' , 
      qq: [// Here I handle key nodes, instead of qq 
        { 
          key: 11 , 
          name: ' Brown john ' , 
          Age: 42 is , 
          address: ' New York. No. 2 Lake Park ' 
        } 
      ] 
    }, 
    { 
      Key: 2 , 
      name: ' Joe Black ' , 
      Age: 32 , 
      address: ' Sidney. No. Lake Park. 1 ' 
    }
  ]

Page display is as follows :( displayed correctly)