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

可展开的表格demo

如图，文档中说给行数据 data 的某项设置 _expanded 为 true，可以默认展开当前行 但是它并没有示例，我不太清楚这个属性应该加在哪个地方
【Vue】iview 表格组件展开功能有个地方不太理解

另外，我想通过自定义列模版创建的按钮来控制是否展开
这是我创建的控制按钮，我如何能够通过点击'详情' 展开列表,而不是它默认的点击最前面哪个三角箭头
【Vue】iview 表格组件展开功能有个地方不太理解

回答

我也卡在这，之前私信题主，一直没得到回复。今天看官方文档时突然想到一个替代方案，希望有更好解决方法的同学能提出建议。
文档[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']来控制展开行的显示或关闭
最终结果像这样
【Vue】iview 表格组件展开功能有个地方不太理解

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

求告知解决方式

给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数组。就完成了一次数据替换。展开的是你的当前列。望采纳。

楼楼解决那个展开问题了吗，有代码？

以上是 【Vue】iview 表格组件展开功能有个地方不太理解 的全部内容， 来源链接： utcz.com/a/77140.html

回到顶部