[vue] 時刻の書式設定と小数点のパーセンテージへの転送

1. 時刻のフォーマット

(1) フロントエンドからバックグラウンドに渡される入力パラメータ

時刻セレクター、入力形式は ["2022-02-27T16:00:00.000Z"、"2022-02-27T16:00:00.000Z"] 背景
に必要な形式は次のとおりです: ["2022-02-27 " , "2022-02-27"]
コードの実装:

 <el-form-item label="创建日期">
            <el-date-picker
              v-model="reports.query.create_date"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            </el-form-item>

(2) バックグラウンドは表示のためにデータをフロントエンドに返します。

バックグラウンドによって返される形式は次のとおりです: ["2022-02-27T16:00:00.000Z", "2022-02-27T16:00:00.000Z"]
フロントエンドが表示したい形式は次のとおりです。
ここに画像の説明を挿入
コード実装:

  <el-table-column
      align="center"
      prop="create_date"
      label="创建日期"
      sortable
      :formatter="dateFormat"
      width="180">
    </el-table-column>
 methods: {
    
    
 	dateFormat: function(row, column) {
    
    
      var t = new Date(row.create_date)
      return t.getFullYear() + '-' + t.getMonth() + 1 + '-' + t.getDate() + ' ' + t.getHours() + ':' + t.getMinutes() + ':' + t.getSeconds()
    }
 }

2. 小数点以下をパーセンテージに変換し、小数点以下 3 桁または 2 桁を維持します

コード:

    <el-table-column
      align="center"
      prop="passing_rate"
      label="通过率"
      sortable
      :formatter="ChangeToPercentage"
      width="100">
    </el-table-column>
 methods: {
    
    
 	ChangeToPercentage: function(row, column) {
    
    
      var percent = (row[column.property] * 100).toFixed(2) + '%'
      return percent
    }
 }

おすすめ

転載: blog.csdn.net/daxiangaifashi/article/details/123306518