H5W3
当前位置:H5W3 > 其他技术问题 > 正文

iview 表格组件展开功能有个地方不太理解

可展开的表格demo

如图,文档中说给行数据 data 的某项设置 _expanded 为 true,可以默认展开当前行 但是它并没有示例,我不太清楚这个属性应该加在哪个地方
图片描述

另外,我想通过自定义列模版创建的按钮来控制是否展开
这是我创建的控制按钮,我如何能够通过点击’详情’ 展开列表,而不是它默认的点击最前面哪个三角箭头
图片描述

回答:

我也卡在这,之前私信题主,一直没得到回复。今天看官方文档时突然想到一个替代方案,希望有更好解决方法的同学能提出建议。
文档[https://www.iviewui.com/compo…]

通过给 columns 数据设置一项,指定 type: ‘expand’,即可开启扩展功能。
给行数据 data 的某项设置 _expanded 为 true,可以默认展开当前行,设置 _disableExpand 可以禁用当前行的展开功能。

<Table :columns="columns" :data="data"></Table>
// html
data () {
            return {
                columns: [
                    {
                        type: 'expand',
                        width: 50,           //通过witdth控制列的宽度
                        render: (h, params) => {
                            return h(expandRow, {  // expandRow为展开后的组件
                                props: {
                                    row: params.row
                                }
                            })
                        }
                    },
                    ...
                ],
                data: [
                    {
                        name: 'John Brown',
                        age: 18,
                        ...
                        _expanded: false    // 为每行数据都添加一个属性_expanded,默认为false
                    },
                    ...
                ],
                ...
            }

那么我在自己的代码里通过控制宽度width: 0.001隐藏第一列(我试过宽度不能直接设置为0,不然会变成默认大小),
然后在按钮的方法里通过this.data[index]['_expanded'] = trueorthis.data[index]['_expanded'] = !this.data[index]['_expanded']来控制展开行的显示或关闭
最终结果像这样
table展开

小弟刚接触前端,好多方面都不熟,希望有其他解决方法的同学能给出更好的方案。

回答:

求告知解决方式

回答:

给data的某一项设置_expanded为true,如:

var data = [
    {
        name: "name1",
        key: "key1"
    },
    {
        name: "name2",
        key: "key3"
    }
]

如果想要默认展开第一行,设置data[0]._expanded = true 即可

回答:

var data = [

{
    name: "name1",
    key: "key1",
    _expanded :true
},
{
    name: "name2",
    key: "key3"
}

]

回答:

我想一次只展开一行:展开一行后上一个展开的行自定合并起来。我也设置_expanded变量了,换行展开的时候会判断当前的行是否是跟上一次展开的是否是一个,不是一个的时候会把上一行的_expanded属性删除,但是不管用,请问楼主有什么办法吗

回答:

不知道题主找到了答案了没,我找到了,分享给大家

从后台取数据回来后,这么写就可以了

ajax()
    success()
        this.myTableData[0]['_expanded'] = true
    

这样就可以把第一行展开了,注意! 是第一行!

我一开始以为[0]指的是第一列,其实是第一行

完美解决,想展开几行,for循环就可以了

回答:

已解决此问题。
解决思路如下。
vue采用的是数据驱动视图。iview也是。
文档上说需要在渲染的时候给data 加上展开判断。
那么,当你点击某一行的某个按钮的时候你只需要改变当前数据即可。
也就是你给表格绑定的data数据。
深拷贝原data数据到新数据,然后将新数组的你正在点击的当前列的_expanded 属性设置为true
然后将新数组重新赋值给表格展示的data数组。就完成了一次数据替换。展开的是你的当前列。望采纳。

本文地址:H5W3 » iview 表格组件展开功能有个地方不太理解

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址