elment-ui

2630 ワード

el-table el-popoverを使用して削除機能を実現
栗:


export default {
    data() {
      return {
        tableData: [],
        iNow: false //      
      }
    },
    created: async
    function() {
      //      
      let params = {
        departmentid: 18,
        search: this.search
      };
      let res = await Http.post(URI.gridding, Api.gridding.netList, params),
      data = res.data;
      this.tableData = data.data;
      //    visible
      $.each(this.tableData,
      function(index, item) {
        Object.assign(item, {
          visible: false
        })
      })
    },
    methods: {
      cancel(index, row) {
        row.visible = false this.$set(this.tableData, index, row)
      },
     //         
      popover_hide() {
           this.iNow = false;
       },
//  
      del: async function(index, row) {
        if(this.iNow){
          return;
        }
        this.INow = true;
        let params = {
          gridid: row.gridid
        };
        //     axios & api  
        let res = await Http.post(URI.gridding, Api.gridding.netDel, params),
        data = res.data;
        if (data.r) {
          this.$message({
            showClose: true,
            message: data.msg,
            type: 'success'
          });
          this.cancel(index, row) 
          this.search_btn()
        }
      }
    }
  }
< /script>
</code></pre> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1200997067523203072"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">