ping 在页面中一行一行显示

上代码就完了
这里输入ping地址, 次数,包大小

  <el-row>
      <el-col :span="6" :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
        <span style="display: inline-block">ping：</span>
        <span style="display: inline-block"
          ><el-input placeholder="请输入IP地址" v-model="ping"> </el-input
        ></span>
      </el-col>
      <el-col :span="6" :xs="24" :sm="24" :md="24" :lg="12" :xl="6">
        <span style="display: inline-block">次数：</span>
        <span style="display: inline-block"
          ><el-input placeholder="请输入次数" v-model="cishu"> </el-input
        ></span>
      </el-col>
      <el-col :span="8" :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
        <span style="display: inline-block">包大小(Byte)：</span>
        <span style="display: inline-block"
          ><el-input placeholder="请输入包大小" v-model="size"> </el-input
        ></span>
      </el-col>
      <el-col :span="3" :xs="24" :sm="24" :md="24" :lg="12" :xl="3">
        <el-button type="primary" style="" @click="componentDidMount"
          >确定</el-button
        >
      </el-col>
    </el-row>

 componentDidMount() {
      this.rizhi_con = "";
      let url =
        "/ping?ip=" + this.ping + "&count=" + this.cishu + "&size=" + this.size;
      var self = this;
      var f = (r) => {
        return r.read().then(function (result) {
          var data = String.fromCharCode.apply(null, result.value);
          self.rizhi_con += data;
          // self.setState({ live }); // Append live log
          if (!result.done) f(r); // Read next chunk
        });
      };
      // console.log(object);
      fetch(url)
        .then((r) => r.body.getReader())
        .then(f);
    },
    wangluo() {
      let url =
        "/ping?ip=" + this.ping + "&count=" + this.cishu + "&size=" + this.size;
      fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        var reader = response.body.getReader();
        var bytesReceived = 0;

        // read() returns a promise that resolves when a value has been received
        reader.read().then(function processResult(result) {
          console.log(result);

          // Result objects contain two properties: //对象包含两个属性
          // done  - true if the stream has already given you all its data. //如果流已经为您提供了所有数据，则为true。
          // value - some data. Always undefined when done is true. //一些数据。完成时始终未定义为真。
          if (result.done) {
            console.log("Fetch complete");
            return;
          }

          // result.value for fetch streams is a Uint8Array
          bytesReceived += result.value.length;
          console.log("Received", bytesReceived, "bytes of data so far");

          // Read some more, and call this function again
          return reader.read().then(processResult);
        });
      });
    },