elementui table組件,根據數據的不同,顯示不同的內容


<template>
  <div class="padding20">
    <div class="publicTable">
      <el-table :data="configureList" border style="width: 100%" :header-cell-style="{background:'#dae1ea'}">
      <el-table-column prop="code" label="算法編碼" width=""></el-table-column>
      <el-table-column prop="functionName" label="算法" width="70"></el-table-column>
      <el-table-column prop="type" label="類型">
        <template slot-scope="scope">
          <span v-if="scope.row.type=== 'input'">輸入</span>
          <span v-if="scope.row.type=== 'output'">輸出</span>
        </template>
      </el-table-column>
      <el-table-column prop="paraCode" label="參數項編碼"></el-table-column>
      <el-table-column prop="paraCodeName" label="參數項" width="100"></el-table-column>
      <el-table-column prop="paraOrderBy" label="參數項排序號" width="150"></el-table-column>
      <el-table-column prop="paraType" label="參數項類型" width="">
        <template slot-scope="scope">
          <span v-if="scope.row.paraType=== 1">錄入</span>
          <span v-if="scope.row.paraType=== 2">選項</span>
          <span v-if="scope.row.paraType=== 3">數表</span>
          <span v-if="scope.row.paraType=== 4">配置項</span>
        </template>
      </el-table-column>
      <el-table-column prop="valueType" label="值類型" width="">
        <template slot-scope="scope">
          <span v-if="scope.row.valueType=== 1">布爾</span>
          <span v-if="scope.row.valueType=== 2">整型</span>
          <span v-if="scope.row.valueType=== 3">浮點</span>
          <span v-if="scope.row.valueType=== 4">字符</span>
          <span v-if="scope.row.valueType=== 5">日期</span>
        </template>
      </el-table-column>
      <el-table-column prop="numUnitIdStr" label="計數單位" width=""></el-table-column>
      <el-table-column prop="unitIdStr" label="計量單位" width=""></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="pointer" >編輯</span>
          <span class="pointer">刪除</span>
        </template>
      </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: "definition_ConfigurePage",
  data(){
    return {
      configureList:[
        {
        cid: "C000065",
        code: "C000065F0002",
        functionName: "算法2",
        id: 223,
        paraCode: "PAAO",
        paraCodeName: "參數15",
        paraOrderBy: 2,
        paraType: 2,
        type: "output",
        valueType: 1
        }
      ]
     }
    }
   }
</script>
<style >
</style>

 ------------------------------------------------------------效果如下------------------------------------------------

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM