vue-easytable展开行

 // 此示例是在组件内部定义了一个子组件。你当然也可以通过 `import`关键字导入一个组件   
 const ChildTableComp = {
        name: "ChildTableComp",
        template: `
        <div class="child-table-comp">
            <ve-table
              style="width:100%"
              :columns="columns"
              :table-data="row.Children"
            />
        </div>
      `,
        props: {
            row: Object,
        },
        data() {
            return {
                columns: [
                  { field: "SourceName", key: "SourceName", title: "点位名称" },
                  { field: "SStationId", key: "SStationId", title: "村庄编码" },
                ],
            };
        },
    };


export default {
  data() {
    return {
    list: [], // table数据
      options: {
        // table样式参数
        stripe: true, // 是否为斑马纹 table
        loading: true, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true, // 是否支持列表项选中功能
      }, // table 的参数结束
    columns: [
        {field: "",key: "a", type: "expand",title: "",width: 50,align: "center",},
        { field: 'Id', title: 'Id',key:'Id', align: 'center'},
        { field: 'City', title: '城市', key:'City',align: 'center'},
        { field: 'RegionName', title: '区县', key:'RegionName',align: 'center',},
        { field: 'TownName', title: '乡镇', key:'TownName',align: 'center' },
        { field: 'Village', title: '村庄名称',key:'Village', align: 'center' },
        { field: 'SStationId', title: '村庄编码',key:'SStationId', align: 'center'},
        { field: 'GLongitude', title: '经度(E)',key:'GLongitude', align: 'center' },
        { field: 'GLatitude', title: '纬度(N)', key:'GLatitude',align: 'center' },
        { field: 'Population', title: '人口',key:'Population', align: 'center' },
      ], // 需要展示的列

    expandOption: {
        render: ({ row, column, rowIndex }, h) => {
            return <ChildTableComp row={row} />;
        },
      },
    }
    }
}

Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkboxvue table 组件 强大、灵活,支持 单元格合并、单元格编辑、多表头固定、多列固定、列拖动、排序、自定义列、分页、单元格编辑、全选、行展开、条件过滤、footer 汇总、导出excel、汇总 Vue2.x flexible table components, support for cell edit,multi-head fixed, multi-column fixed, clumn drag, sort, custom column,Cell Editing, Support cell merge (colSpan and rowSpan),Support checkbox selectionhttps://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/row-expand

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值