vue中实现粘贴批量地址解析自动填入表格

**需求：**在添加收货地址时，为了方便代理下单（因为代理都是下各种不同地址的订单，输入地址的时候，是否可以直接复制粘贴 整个，智能识别，或者直接读取粘贴的内容）

1、npm 安装

npm install address-parse --save

2、在需要的组件中引入

import AddressParse from 'address-parse'

3、直接复制以下完整代码

<template> 
 <div>
    <div class="header_form"> 
     <el-form :inline="true" :model="formInline" class="demo-form-inline">   
     <el-form-item label="识别地址">  
        <el-input   
           type="textarea"  
           v-model="message" 
           :rows="6"   
           style="width:600px"   
         placeholder="智能解析：粘贴或者输入整段文字，自动识别姓名、号码、地址"          >
   </el-input>     
   </el-form-item>        
      <el-form-item>     
      <el-button       
        class="inquire"     
       @click="parseAddress"   
         size="mini"       
         icon="el-icon-search"    
        >智能识别</el-button >       
    <el-button       
       type="danger"     
       @click="clean"      
       size="mini"      
        icon="el-icon-search"   
         >清空</el-button   >    
      </el-form-item>   
   </el-form>   
 </div>   
 <div class="tableBox">    
  <el-table :data="tableData" border>   
     <el-table-column      
        fixed      
        prop="phone"     
        label="号码"    
        align="center"  
        min-width="150"  >     
   </el-table-column>     
   <el-table-column      
       prop="name"     
       label="名字"    
       align="center"   
       min-width="150"   
     >     
   </el-table-column>   
     <el-table-column   
         prop="province" 
         label="省市" 
         align="center" 
         min-width="150"    >    
    </el-table-column>    
    <el-table-column    
       prop="city"   
       label="省市区" 
        align="center"   
        min-width="150"    >   
     </el-table-column>   
     <el-table-column  
         prop="address"  
         label="地址"  
         align="center" 
         min-width="150"   >     
   </el-table-column>    
         <el-table-column   
           fixed="right"     
           label="操作"    
           align="center"  
            min-width="100" 
       >    
      <template slot-scope="scope">  
          <el-button @click="handleClick(scope.row)" type="text" size="small"  
            >查看</el-button   >   
       </template>     
   </el-table-column>   
   </el-table>  
  </div>  
  <div class="paging">  
   <el-pagination     
      background    
      @size-change="handleSizeChange"  
      @current-change="handleCurrentChange" 
       :current-page="currentPage4"  
      :page-sizes="[10, 20, 30, 40]"   
     :page-size="100"   
     layout="total, sizes, prev, pager, next, jumper" 
       :total="10"      >    
  </el-pagination>   
 </div>
  </div>
</template>
<script>
import AddressParse from 'address-parse';
export default ({ 
  data () {  
      return {  
      currentPage4: 0,  
      formInline: {   
    
            },   
        message: '', 
     tableData: [  
      {     
        date: '',  
        name: '',   
        province: '',   
        city: '',    
        address: '',  
         phone:'',   
       }    
     ]  
    }  
}, 
 methods: {   
 clean () { //地址解析，清空   
   this.message = ''   
   console.log(this.message)  
  },  
  //智能解析地址   
 parseAddress () {  
    /*判断解析的地址内容不为空*/   
   if (this.message != '') {     
   //获取到输入框里的行数      
   var a = this.message.trim().split(/\r?\n\s*/).length     
  //去除空白行    
    var s = this.message.split(/\r?\n\s*/);    
           this.tableData = []   
     for (var i = 0; i < a; i++) {   
       const result = AddressParse.parse(s[i]);   
       var newValue = {         
       name: result[0].name,     
       phone: result[0].mobile,
        province: result[0].province,  
          city: result[0].city,    
        receiveStreet: result[0].details,  
          address: `${result[0].province}-${result[0].city}-${result[0].area}-${result[0].details}`,   
                  };       
   this.tableData.push(newValue);    
    }    
  } else {  
      console.log('请输入你要解析的地址')    
         } 
   },  
    handleClick (row) {    
  console.log(row);    
     },   
 handleSizeChange () {    },  
  handleCurrentChange () {    } 
 }}
)
</script>
<style scoped>
</style>

4、完成，亲测有用！！！