自动导入地址的小功能

npm安装

npm install address-parse --save

在组件中引入

import AddressParse from 'address-parse'

直接复制下面完整代码

注意：在插槽的使用上区别

vue2 <template slot-scope="scope">

vue3 <template #title="scope">

    <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 #title="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 {

          regmsg: [],

          currentPage4: 0,

          formInline: {},

          message: "",

          tableData: [

            {

              date: "",

              name: "",

              province: "",

              city: "",

              address: "",

              phone: "",

            },

          ],

        };

      },

      methods: {

        clean() {

          //地址解析，清空

          this.message = "";

          console.log(this.message);

        },

        trimAll(ele) {

          if (typeof ele === "string") {

            return ele.split(/[\t\r\f\n\s]*/g).join("");

          } else {

            console.error(

              `${typeof ele} is not the expected type, but the string type is expected`

            );

          }

        },

        init() {

          this.regmsg.push( this.trimAll(this.message)); // 1234456

          console.log(this.regmsg);

        },

      


        //智能解析地址

        parseAddress() {

          /*判断解析的地址内容不为空*/

          if (this.message != "") {

            this.init()

            //获取到输入框里的行数

            var a = this.regmsg.length;

            console.log(this.message, "message");

            //去除空白行

            var s = this.regmsg;

            this.tableData = [];

            console.log(a, s, "a");

            for (var i = 0; i < a; i++) {

              const result = AddressParse.parse(s[i]);

              console.log(result, "result");

              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>