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

2020-09-24  本文已影响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)
}
上一篇下一篇

猜你喜欢

热点阅读