美文网首页
elementui expand表格展开方式试水 type="

elementui expand表格展开方式试水 type="

作者: 一碗米粉的故事 | 来源:发表于2020-09-24 10:12 被阅读0次

    第一种:官方例子

    返回的数据在 row 里,直接取即可

    第二种:需要请求 但无分页需求

       <el-table
        :data="tableData"
            :row-key="getRowKeys"
                :expand-row-keys="expands"
                height="100%"
                @expand-change="handleExpand"
        >
     <el-table-column type="expand">
          <template slot-scope="props">
    

    <sub :sub-table="subTable[props.row.id]"></sub> </template> </el-table-column>

        import Sub from './sub'
        
        data(){
        return {
        tableData:[],//一级表格数据
          subTable:{},
          expandRows:[], // 记录用户展开的行 用来判断是否需要重新请求数据判断
          expands:[],
        }
        }
        
        
        methods:{
        // 控制只展开一个 如果不需要控制 可以删除相关代码
          getRowKeys(row) {
        return row.id
      },
    
      handleExpand(row, expandRows) {
        if (expandRows.length) {
          this.expands = []
          if (row) {
            this.expands.push(row.id)
          }
        } else {
          this.expands = [] 
        }
        if (this.expandRows.length <= expandRows.length) {
          this.subTable[row.id].loading = true
    
    

    request('api').then((res) => { this.$set(this.subTable[row.id], 'list', res || []) })

            .finally(() => {
              this.subTable[row.id].loading = false
            })
        }
        this.expandRows = expandRows
      },
      //在获取 表格数据的方法里需要初始化一些值
      getData(){
       request('api').then((res) => {
                this.expandRows = []
                 this.tableData=res || []
    
    

    this.tableData.forEach((item) => {

    
              this.subTable[item.id] = {
                loading: false,
                list: []
              }
            })
    
            })
      } 
        }
        
    sub 子组件代码:
    
     <el-table
       v-loading="data.loading"
        :data="data.list"
        >
        data(){
        return {
          data:[],
        }
        }
        
          props: {
          subTable: {
            type: object,
    
          },
          
            watch: {
        subTable: {
          handler: function(newVal, oldVal) {
          this.data = newVal
          },
          deep: true
        },
        
    

    第三种: 需要请求 并且有分页请求

    和第二种方法类似,只是标红部分 需要修改下
    //table template里模板需要修改
       <sub :sub-table="subTable[props.row.id]" @getData="getData($event, row)"></sub>
    
    //需带上id/第几页/每页显示多少条(简化版可以只控制第几页,条数写死)
    request('api',{id:1,num:1,size:10}).then((res) => { 
    this.$set(this.subTable[row.id], 'list', res.list || []) 
    this.subTable[row.id].total = res.total || 0
    })
      //在获取 表格数据的方法里需要初始化一些值
      this.subTable[item.id] = {
    // 其实这个地方可以加上表头属性 可以动态传入表头一些相关有权限控制的值
                loading: false,
                list: [],
         total: 0, //这个是和第二种相比较 多加的参数
            num: 1, //这个是和第二种相比较 多加的参数
            size: 10 //这个是和第二种相比较 多加的参数
              }
    
    
    // 子组件触发的分页请求
    getData(dt, row){
    this.subTable[row.id].num = data.num
        this.subTable[row.id].size = data.size
        this.handleExpand(row, this.expandRows)
    }
    

    相关文章

      网友评论

          本文标题:elementui expand表格展开方式试水 type="

          本文链接:https://www.haomeiwen.com/subject/htczyktx.html