iview 树形table实现单选且父级数据不可选

实现样式:
在这里插入图片描述

<Table row-key="id" :columns="columns" :data="data" border ></Table>

// data代码:
	  currentChoose:'',
      columns: [
          {
            title: '#',
            width: 60,
            align: 'center',
            render: (h, params) => {
                let id = params.row.id;
                let flag = false;
                let isshow = params.row._disabled
                if (this.currentChoose === id) {
                  flag = true
                } else {
                  flag = false
                }
                let self = this
                return h('div', [
                  h('Radio', {
                    props: {
                      value: flag,
                      disabled:isshow
                    },
                    on: {
                      'on-change': () => {
                        self.currentChoose = id;
                      }
                    }
                  })
                ])
              }
          },
          {
              title: 'Name',
              key: 'name',
              tree: true
          },
          {
              title: 'Age',
              key: 'age'
          },
          {
              title: 'Address',
              key: 'address'
          }
      ],
      data: [
          {
              id: '100',
              name: 'John Brown',
              age: 18,
              address: 'New York No. 1 Lake Park'
          },
          {
              id: '101',
              name: 'Jim Green',
              age: 24,
              address: 'London No. 1 Lake Park',
              _showChildren:true,
              _disabled:true,
              children: [
                  {
                      id: '10100',
                      name: 'John Brown',
                      age: 18,
                      address: 'New York No. 1 Lake Park'
                  },
                  {
                      id: '10101',
                      name: 'Joe Blackn',
                      age: 30,
                      address: 'Sydney No. 1 Lake Park'
                  },
                  {
                    id: '10102',
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    _disabled:true,
                    _showChildren:true,
                    children: [
                        {
                            id: '1010200',
                            name: 'Jim Green',
                            age: 24,
                            address: 'New York No. 1 Lake Park'
                        }
                    ]
                }
              ]
          },
          {
              id: '102',
              name: 'Joe Black',
              age: 30,
              address: 'Sydney No. 1 Lake Park'
          },
          {
              id: '103',
              name: 'Jon Snow',
              age: 26,
              address: 'Ottawa No. 2 Lake Park'
          }
      ]
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
treegrid插件 当前中的行: var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:[ {name: "城区分公司", code: "CQ", assignee: "", children:[ {name: "城区卡品分销中心"}, {name: "先锋服务厅", children:[ {name: "chlid1"}, {name: "chlid2"}, {name: "chlid3", children: [ {name: "chlid3-1"}, {name: "chlid3-2"}, {name: "chlid3-3"}, {name: "chlid3-4"} ]} ]}, {name: "半环服务厅"} ]}, {name: "清新分公司", code: "QX", assignee: "", children:[]}, {name: "英德分公司", code: "YD", assignee: "", children:[]}, {name: "佛冈分公司", code: "FG", assignee: "", children:[]} ] }; /* 单击数据行后触发该事件 id:行的id index:行的索引。 data:json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的方法来自定义栏数据 */ function customCheckBox(row, col){ return ""; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "查看"; } //创建一个组件对象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展开、关闭所有节点。 isOpen=Y表示展开,isOpen=N表示关闭 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得当前中的行,方法返回TreeGridItem对象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //获取数据行属性值 //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //获取父数据行 var parent = treeGridItem.getParent(); if(parent!=null){ //jQuery("#currentRow").val(parent.data.name); } //获取子数据行集 var children = treeGridItem.getChildren(); if(children!=null && children.length>0){ jQuery("#currentRow").val(children[0].data.name); } } }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值