Bootstrap

iview中tbale树形数据和多选结合

iview中tbale树形数据和多选结合

网上没找到现成的!只能自己写个了,直接上代码!

(可以直接复制到 https://run.iviewui.com/上运行)

html

  <Table row-key="id" :columns="columns" :data="tableData" border @on-select="onselect" @on-select-cancel="onselectCancel" @on-expand-tree="onexpandtree"></Table>

js

export default {
   
  data() {
   
    return {
   
      columns: [
        {
   
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
   
          title: 'Name',
          key: 'name',
          tree: true,
        },
        {
   
          title: 'Age',
          key: 'age',
        },
        {
   
          title: 'Address',
          key: 'address',
        },
      ],
      tableData: [
        {
   
          id: '100',
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
        },
        {
   
          id: '101',
          name: 'Jim Green',
          age
;