AntDesign table 子菜单应用

话不多说先上效果图

 

实现是用的两层table嵌套

html结构

</a-button>
    <a-table
      :expandRowByClick='true'
      :columns="columns"
      :data-source="data"
      class="components-table-demo-nested">

<!--      编辑-->
      <a slot="operation1"  slot-scope="text,record" @click.stop='test'>编辑</a>
<!--      是否选中 @click.stop是为了防止ant组件的事件冒泡 -->
      <a slot="operation2" slot-scope="text,record" @click.stop>
        <a-switch default-checked @change="onChange" :defaultChecked='false' />
      </a>
<!--      调试-->
      <a slot="operation3" slot-scope="text,record">调试</a>

<!--      :showHeader='false'-->
      <a-table
        :showHeader='false'
        slot="expandedRowRender"
        slot-scope="scoped,record"
        :data-source="scoped.list"
        :columns="innerColumns"
        :pagination="false"
      >

        <div slot="test" slot-scope="text,record">自定义</div>

      </a-table>
    </a-table>

图片这里这里我搞错了插槽那个是自定义数据栏（父子级都是自定义数据栏）

 表头配置

columns:[
          { title: 'title', dataIndex: 'title', key: 'title' ,width:'70%'},
          { title: '编辑', key: 'operation1', scopedSlots: { customRender: 'operation1' } },
          { title: '是否开启', key: 'operation2', scopedSlots: { customRender: 'operation2' } },
          { title: '调试', key: 'operation3', scopedSlots: { customRender: 'operation3' }},
        ],
        innerColumns :[
          { title: '原始数据',dataIndex: 'cailber', key: 'cailber', ellipsis: true },
          { title: '行为数据',dataIndex: 'type', key: 'type', ellipsis: true },
          { title: '自定义数据',dataIndex: 'test', key: 'test', scopedSlots: { customRender: 'test' } },
        ],

数据格式是

data = [
        {  id: 0,
           title: '损坏', 
           number: 10,
           list: [
                { name: 1, type: '流量控制阀1', cailber: 100, desc: '备注' },
                { name: 2, type: '流量控制阀2', cailber: 102, desc: '备注' }
            ] 
        },
        {  id: 1,
           title: '常关', 
           number: 15, 
           list: [
                { name: 1, type: '蝶阀1', cailber: 15, desc: '备注' },
                { name: 2, type: '蝶阀2', cailber: 14, desc: '备注' }
            ]
        }
      ]