iView Table 可展开 on-expand="onExpand" 实例使用(完美版)

最新推荐文章于 2023-02-17 15:57:22 发布
置顶 最新推荐文章于 2023-02-17 15:57:22 发布
阅读量9.4k 收藏 12
点赞数 4
分类专栏： iview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42481234/article/details/89334696
版权

本人代码可以直接在https://run.iviewui.com/中运行,

两处点击处理效果一样, 完善操作逻辑


<!--
 * @Author: FGJ
 * @LastEditors: Do not edit
 * @Date: 2018-12-28 00:31:30
 * @LastEditTime: 2019-04-16 15:30:08
 * @Description: iview
 -->
<template>
    <section class="main">
       
            <Table stripe highlight-row  
                   :columns="tableColumns1" 
                   :data="tableData" 
                     
                   size="small" 
                   ref="table"     
                   @on-expand="onExpand"  
                   @on-select="onSelect"
                   @on-selection-change='selectionClick'
                  >
            </Table>        
         
       
    </section>
</template>

<script> 
    import expandRow from './table-expand.vue';
    export default {   
        components: { expandRow }, 
        data () {
            return {               
                tableData:[],                 
                //行数据标题
                tableColumns1:[
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(expandRow, {
                                props: {  row: params.row  },
                                // on:    {  click: () => { this.expand(params.row, params.index)} }
                                
                            })
                        }
                    },
                    {
                        title: '线路名称',
                        key: 'lineName'
                    },
                    {
                        title: '线路方向',
                        key: 'lineDirection'
                    },
                    {
                        title: '始发站',
                        key: 'startStation'
                    },
                    {
                        title: '经停站',
                        key: '_text',    
                        width:120,
                        align: 'center',
                        render: (h, params) => {   
                            return h("span", {
                                props: {  row: params.row  },
                                style: {  color: 'tomato'} ,         
                                on:    {  click: () => { this.expand(params.row, params.index)} }                                
                            },params.row._text)
                        }
                    },
                    {
                        title: '终点站',
                        key: 'endStation'
                    },
                    {
                        title: '线路类型',
                        key: 'lineType'
                    },
                    {
                        title: '运营里程',
                        key: 'mileage'
                    },
                    {
                        title: '线路运营单位',
                        key: 'operateDepart'
                    },
                    {
                        title: '票价',
                        key: 'price'
                    },
                ],
               
                // 数据源
                tableData1: [
                    {   
                       id:12,
                       lineName:"公主坟线",
                       lineDirection:"机场-市区",
                       startStation:"T1",
                       stopStation:"all",
                       endStation:"公主坟",
                       lineType:"市区",
                       mileage:"100Km",
                       operateDepart:"PEK运营一部",
                       price:"20元",
                       stopStation:[
                            {stopStation:"东直门",id:11},
                            {stopStation:"雍和宫",id:22}, 
                            {stopStation:"安定门",id:33},
                            {stopStation:"西直门",id:33},
                            {stopStation:"复兴门",id:33},
                            {stopStation:"建国门",id:33}
                       ]
                                                            
                    },
                    {  
                       id:13, 
                       lineName:"公主坟线",
                       lineDirection:"机场-市区",
                       startStation:"T1",
                       stopStation:"all",
                       endStation:"公主坟",
                       lineType:"市区",
                       mileage:"100Km",
                       operateDepart:"PEK运营一部",
                       price:"20元" ,
                       stopStation:[
                            {stopStation:"东直门",id:11},
                            {stopStation:"西直门",id:22}, 
                            {stopStation:"建国门",id:33}
                       ]                            
                    },
                     {  
                       id:14, 
                       lineName:"公主坟线",
                       lineDirection:"机场-市区",
                       startStation:"T1",
                       stopStation:"all",
                       endStation:"公主坟",
                       lineType:"市区",
                       mileage:"100Km",
                       operateDepart:"PEK运营一部",
                       price:"20元" ,
                       stopStation:[
                            {stopStation:"东直门",id:11},
                            {stopStation:"西直门",id:22}, 
                            {stopStation:"建国门",id:33}
                       ]                         
                    },
                     {  
                       id:15, 
                       lineName:"公主坟线",
                       lineDirection:"机场-市区",
                       startStation:"T1",
                       stopStation:"all",
                       endStation:"公主坟",
                       lineType:"市区",
                       mileage:"100Km",
                       operateDepart:"PEK运营一部",
                       price:"20元" ,
                       stopStation:[
                            {stopStation:"东直门",id:11},
                            {stopStation:"西直门",id:22}, 
                            {stopStation:"建国门",id:33}
                       ]                      
                    },
                    {  
                       id:16, 
                       lineName:"公主坟线",
                       lineDirection:"机场-市区",
                       startStation:"T1",
                       stopStation:"all",
                       endStation:"公主坟",
                       lineType:"市区",
                       mileage:"100Km",
                       operateDepart:"PEK运营一部",
                       price:"20元" ,
                       stopStation:[
                            {stopStation:"东直门",id:11},
                            {stopStation:"西直门",id:22}, 
                            {stopStation:"建国门",id:33}
                       ]
                           
                    }                       
                    
                ]
               
               
            }
        },  
        created(){
          
        }, 
        watch:{

        }, 
        mounted () {          
            this.tableData = this.tableData1.map(item => {
                item._expanded = false
                item._text = "查看所有经停站"
                return item
            })
            console.log(this.tableData);
            

        },  
        methods: {
            
            //点击展开收起
            expand(item,index){
                // console.log(item,index); 
                // 展开点击项,展开之前恢复到初始状态
                this.tableData.sort() //更新视图
                for (let i = 0; i <  this.tableData.length; i++) {
                    this.tableData[i]._expanded = false;   
                    this.tableData[i]._text = "查看所有经停站"                       
                } 
                //点击展开
                if (item._expanded) {  
                    // this.tableData.splice()  
                    // this.tableData.push()  
                    this.tableData.sort() //更新视图 
                    this.tableData[index]._expanded = false
                    this.tableData[index]._text = "查看所有经停站"                        
                }else{
                    this.tableData.splice()  
                    this.tableData[index]._expanded = true
                    this.tableData[index]._text = "收起所有经停站" 
                }
                     
            },

            // 展开原生事件  点击左侧展收起           
            onExpand(row, status){
                // console.log(row,status);  
                // console.log(this.tableData);
                if(status){
                    this.tableData1.splice()                 
                    this.tableData1.filter((item, index)=>{  
                        if(item.id == row.id){   
                            item._expanded = true;   //展开选中的行
                            // this.$set(item, "_text", "收起所有经停站")                           
                            item._text = "收起所有经停站"   
                        }else{
                            item._expanded = false;   //其他行关闭 
                            item._text = "查看所有经停站"                          
                        }
                        return item; 
                    });                  
                    this.tableData = this.tableData1                
                }else{                
                    this.tableData.splice()   
                    this.tableData.map((item, index)=>{                                                    
                        if(item.id == row.id){   
                            item._expanded = false;   //展开选中的行
                            // this.$set(item, "_text", "查看所有经停站")                           
                            item._text = "查看所有经停站"   
                        }else{
                            item._expanded = false;   //其他行关闭    
                            item._text = "查看所有经停站"                       
                        }                      
                        return item; 
                    });
                       
                }
            },
          
        }
    }
</script>
<style scoped>
   
</style>

// table-expand.vue
<style scoped>
    .expand-row{
        margin-bottom: 16px;
    }
</style>
<template>
    <div>     
        <Row>
            <Col>
                <Steps :current="10">
                    <Step 
                        v-for="item in stopStationList" 
                        :title="item.stopStation" 
                        icon="ios-subway" 
                        :content="item._index"
                        :value="item.id" 
                        :key="item.id"
                    ></Step> 
                </Steps>
            </Col>
        </Row>
      
    </div>
</template>
<script>
    export default {
        props: {
            row: Object
        },
             
        data () {
            return {
                valueRow:this.row.stopStation,
                stopStationList:[]
            }
        },
        //  stopStation:[
        //     {stopStation:"东直门",id:11},
        //     {stopStation:"西直门",id:22}, 
        //     {stopStation:"建国门",id:33}
        // ]    
        created(){
        //    console.log(this.valueRow);
        //    this.stopStationList = this.row.stopStation
        //   给数据添加index
           this.stopStationList = this.row.stopStation.map((item,index) => {
                item._index = "经停站"+(index+1)              
                return item
            })
          
        }, 
        methods: {

        }
    };
</script>

 

 

云墨cloudMel
关注
  • 4
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iView 组件多行表头的实现
qwe122343的博客
07-08 2378
业务需求要实现一个表格里有两行表头，经过查找 iView 组件中已经提供了处理的方法：iView 多行表头，将自己的操作过程记录一下 原表格如下图所示，民族需要包括汉族和少数民族两个子表头，性别需要包括男和女两个子表头，可以添加 children 进行实现 <template> <Table border :columns="columnsBig" class="InspectionTable"></Table> </template> <scr
iView Table 可展开 @on-expand="onExpand" 实例使用(一)
weixin_42481234的博客
04-16 4920
<!-- * @Author: FGJ * @LastEditors: Do not edit * @Date: 2018-12-28 00:31:30 * @LastEditTime: 2019-04-16 10:05:43 * @Description: iview --> <template> <section class="main...
iview-admin table自定义expand组件
qq_35258268的博客
12-06 7225
由于iview-admin自带的table-expand组件是在table 行下面加了一个table，如果展开项需要和上级table展示列内容一致，则需要进行繁琐的样式修改。现可将展开项的data加在table data数组内，也可进行加载展开项list
iview table expanded 展开收缩
sunny_day的博客
12-25 1万+
给table设置type:expand,可以使table展开收缩. this.data1[index]._expanded = true/false; 使用这句代码可以使其展开关闭.当然在改变后要刷新渲染. 可以使用vue,vm.$forceUpdate(); 但经过使用不起作用,就用了splice()方法,也达到同样效果. h( ...
iview table点击单元格打开新页面、expand展开子组件调用父组件事件
weixin_45274678的博客
08-02 2412
一、点击单元格打开新页面 cloumns columns:[ { title: "项目名称", align: "center", width:170, key: "projectName", render: (h, params) => { //字符溢出显示省略号，鼠标悬停显示全部信息 if(params.row.projectName&&p...
基于IView中on-change属性的使用详解
08-27
下面小编就为大家分享一篇基于IView中on-change属性的使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
基于iView和he-tree-vue的一个拖拽树形组件
12-16
树形组件：支持selected选中状态（单/多），checkbox选择框，拖拽功能，增、删、改功能，双击展开、箭头展开收起功能，全部展开、收起功能，自定义图标、按钮、辅助信息等。
iview table高度动态设置方法
08-27
下面小编就为大家分享一篇iview table高度动态设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Iview Table组件中各种组件扩展的使用
12-09
一、Iview Table 组件 多选框选中和禁选设置 Table添加多选框 通过给 columns 数据设置一项，指定 type: ‘selection’ ，即可自动开启多选功能。 正确使用好以下事件，可以达到需要的效果： @on-select ，选中...
vue中使用iview的table首行默认高亮、expand下默认展开/刷新保持展开
chelflan's blog
03-11 1760
iview的table首行默认高亮1.问题:vue中使用iview的table首行默认高亮2.解决:一行代码搞定 1.问题:vue中使用iview的table首行默认高亮 2.解决:一行代码搞定 dataTable[0]._highlight = true;
iview的expand展开功能，默认展开第一个
浩星
07-17 6424
前言： iview的table功能是越来越丰富了，4.0开始，功能已经可以基本满足我们需要了，跟element可以比较了，尤其是他对render函数的支持性非常好。这里说下他的expand展开功能： 展示效果： 实现代码：分两个vue文件 1、父组件中：给你的columns中加下面代码 { title: '展开', type: 'expand', width: 80, ...
iView表格（Table）点击展开功能（每一行）
Kino的博客
08-11 2947
效果图： 一、首先我们要在表格(Table)上添加绑定每行的点击事件@on-row-click <Table @on-row-click="onExpand" border :columns="columns" :data="list"></Table> 二、在表格(Table)的表头columns中添加一列 { type:'expand', width:30, render:(h,params)=>{ return h('Table
iView中表格添加点击展开扩展的功能
浩星
07-22 1758
前言： iview的table里面的展开，我们一般会希望点击行来触发这个效果 更多 效果图： 实现代码： template: <Table @on-row-click="onExpand"></Table> mehtods: methods:{ onExpand(row,index){ this.msgData.forEach((item,i)=>{ //这个循环是为了每次只能展开一个，其他自动收起，...
iview实现表格的expand和编辑功能
wytraining
09-08 1684
iview表格实现的编辑和expand功能
antd react table扩展行(expandedRowRender，onExpand)异步记载数据再渲染问题
qq_40678503的博客
11-08 1万+
最近在做项目的时候遇到一种情况，需求是做可展开的表格，当点击展开时异步发送请求将数据渲染到展开的内容中。 项目用的是react+Antdesign 主要使用的就是Table组件的onExpand，expandedRowRender两个属性。 expandedRowRender 额外的展开行 类型Function(record, index, indent, expanded):ReactNode...
AntD-tree组件使用详析
qq_45799465的博客
02-17 6749
一、selectedKeys与onSelect。 二、expandedKeys与onExpand。 三、loadedKeys与onLoad和onExpand。 四、loadData。 五、树节点局部节点刷新。 六、递归获取与修改数据
vue——实现组织架构图(vue-org-tree)——技能提升
热门推荐
yehaocheng520的博客
08-13 3万+
关于组织架构图，效果图如下： 之前我是用jq写过一个组织架构图，文章链接如下：当时是用的jOrgChart jq版本的组织架构图：https://blog.csdn.net/yehaocheng520/article/details/117379214?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162883781016780264023604%2522%252C%2522scm%2522%253A%252220140713.13010
iview table tree可编辑指定列
不积跬步何以至千里
11-11 1141
先上效果图： 需求： 1、表格里放tree 2、Formula列 可编辑下拉框 3、Min、Max 可编辑数字输入框 4、有且仅有一个编辑框显示在界面上 实现： 1、表格 <Table row-key="id" :colunms="colunms" :data="tableData" border @on-expand-tree="onexpandtree"></Table> 2、初始化参数 data(){ return{ formulaList:[{ id:0,
iview table 咋用v-for
最新发布
07-23
在使用 iView 的 Table 组件中，我们不能直接使用 `v-for` 对表格进行渲染。相反，我们需要使用 `data` 属性来传递表格数据，并在 Table 组件中使用 `columns` 属性定义表格的列。 以下是一个示例： ```vue ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值