vue+element-ui,打开一个页面后如何自动弹出一个弹框，里面的部分数据需要引入后端返的字段

vue+element-ui,打开一个页面后如何自动弹出一个弹框，里面有多行数据，里面的部分数据需要引入后端返的字段

比如如何让下面这个弹框里展示多条数据，还有其他报告份数需要展示

先写个方法用于处理消息组件提示语，在页面初始化的时候调获取页面整体数据的接口方法，如果能在获取整体数据的接口方法里拿到数据，就直接在接口成功状态里保存获取数据，再用this.$nextTick调展示消息组件的方法；如果是其他接口，就在页面初始化的时候先调获取页面整体数据的接口方法，再用this.$nextTick或者写个延时setTimeout调这个展示消息组件的方法，在展示消息组件的方法里调后台接口，根据后台返回的数据条件判断处理一下提示语信息写到消息组件里，用this.$nextTick或者setTimeout是为了防止页面没有渲染完就出现消息组件，最好是只用一个消息提示框就展示完你想提示的全部信息，不然就用自动关闭，手动一个个去关的话应该不太好

message 属性支持传入 HTML 片段

• 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7600608
• 你也可以参考下这篇文章：基于element-ui与vue结合的具有增删改查功能的表格与分页的静态页面
• 除此之外, 这篇博客: vue+element-ui表格中实现树状表格。并且插入下拉框项中的 vue+element-ui表格中实现树状表格可以进行多选。并且插入下拉框项 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  
• • 在开发中遇到一个需求是表格中的数据要以复选框树状的形式来展示，并且表格的某一列表头嵌套下拉框，下拉框中可以任意选数据，点击多选框进行多选保存
    
  • 如图每一行数据可以进行对版本的一个下拉选择，并且进行勾选保存，html代码如下：
    （小菜鸡一枚，大家多多指教！欢迎大家指出问题~~~~）

    <el-table ref="table"
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    :indent="50"
                    :header-cell-style="{background:'#F2F2F2'}"
                    :select-on-indeterminate="false"
                    @select="select"
                    @select-all="selectAll"
                    @selection-change="selectionChange"
                    default-expand-all
                    :tree-props="{children: 'childList'}">
            <el-table-column type="selection"
                             :selectable='selectInit'
                             width="55">
            </el-table-column>
            <el-table-column prop="date"
                             label="日期"
                             sortable
                             width="180">
            </el-table-column>
            <el-table-column label="版本号"
                             width="">
              <template slot-scope="scope">
                <el-select v-model="scope.row.version"
                           @change="change(scope.$index,scope.row)">
                  <el-option v-for="item in roleData"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
  
              </template>
            </el-table-column>
  
            <el-table-column prop="address"
                             label="地址">
            </el-table-column>
          </el-table>
  

  js代码：

  export default {
    data () {
      return {
        checkPageAll: false,
        tableData: [{
          id: 1,
          date: '2016-05-01',
          address: '上海市普陀区金沙江路1弄'
        }, {
          id: 2,
          date: '2016-05-02',
  
          address: '上海市普陀区金沙江路 2 弄'
        }, {
          id: 3,
          date: '2016-05-03',
  
          address: '上海市普陀区金沙江路 3 弄',
          childList: [{
            id: 31,
            date: '2016-05-31',
  
            address: '上海市普陀区金沙江路 4 弄'
          }, {
            id: 32,
            date: '2016-05-32',
  
            address: '上海市普陀区金沙江路 5 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-04',
  
          address: '上海市普陀区金沙江路 6 弄'
        }],
        selectArr: [],
        roleData: []
      };
    },
    methods: {
      change (index, row) {
        console.log(index, row)
      //设置多选框某些项不可多选
      selectInit (row) {
        // console.log(index)
        if (row.id == 3) {
          return false  //不可勾选
        } else {
          return true  //可勾选
        }
      },
      select (selection, row) {
        if (selection.some(el => { return row.id === el.id })) {
          if (row.childList) {
            row.childList.map(j => {
              this.toggleSelection(j, true)
            })
          }
        } else {
          if (row.childList) {
            row.childList.map(j => {
              this.toggleSelection(j, false)
            })
          }
        }
      },
      selectAll (selection) {
        // tabledata第一层只要有在selection里面就是全选
        const isSelect = selection.some(el => {
          const tableDataIds = this.tableData.map(j => j.id)
          return tableDataIds.includes(el.id)
        })
        // tableDate第一层只要有不在selection里面就是全不选
        const isCancel = !this.tableData.every(el => {
          const selectIds = selection.map(j => j.id)
          return selectIds.includes(el.id)
        })
        if (isSelect) {
          selection.map(el => {
            if (el.childList) {
              el.childList.map(j => {
                this.toggleSelection(j, true)
              })
            }
          })
        }
        if (isCancel) {
          this.tableData.map(el => {
            if (el.childList) {
              el.childList.map(j => {
                this.toggleSelection(j, false)
              })
            }
          })
        }
      },
      selectionChange (selection) {
        this.selectArr = selection
        console.log(this.selectArr, '0909')
      },
      toggleSelection (row, select) {
        if (row) {
          this.$nextTick(() => {
            this.$refs.table && this.$refs.table.toggleRowSelection(row, select)
          })
        }
      },
    }
  };
  

• 您还可以看一下 jason老师的vue通用后台管理课程中的 element-ui在网页中的使用小节, 巩固相关知识点