vue使用elementUI中的table表格字符類型與數字類型轉換

一.表格顯示如下:使用表格中的formatter用來格式化內容
方法類型如下:

Function(row, column, cellValue, index)

二.使用舉例:
1.table表格中顯示如下:

<el-table :data="userData" stripe style="width: 100%" tooltip-effect="dark" ref="multipleTable"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">  </el-table-column>
        <el-table-column prop="loginAccount" label="賬號" width="180"> </el-table-column>
        <el-table-column prop="userName" label="用戶名" width="180">  </el-table-column>
        <el-table-column prop="email" label="郵箱" width="180">  </el-table-column>
        <el-table-column prop="phone" label="電話" width="180">  </el-table-column>
        <el-table-column prop="tel" label="手機" width="180">  </el-table-column>
      <!---  舉例關鍵一行:使用 formatter格式化內容  ,formatterSex爲自定義方法名         --->
        <el-table-column prop="sex" label="性別" width="180" :formatter="formatterSex"> </el-table-column>

        <el-table-column prop="addr" label="地址" min-width="180"> </el-table-column>
        <el-table-column prop="createDatetime" label="創建日期" width="180">  </el-table-column>
        <el-table-column prop="updateDatetime" label="更新日期" width="180"> </el-table-column>
        <el-table-column fixed="right" label="允許登陸" width="120">
          <template slot-scope="scope">
            <el-switch @change="switchChange(scope.row.typeId,scope.row.id)" v-model="scope.row.typeId"
              active-color="#13ce66" inactive-color="#ff4949" :active-value="active" :inactive-value="inactive">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" min-width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="normal" circle @click="editUser(scope.row)"><i class="el-icon-edit"></i></el-button>
            <!-- <el-button type="normal" circle><i class="el-icon-delete"></i></el-button> -->
          </template>
        </el-table-column>
      </el-table>

2.方法中如下:

 methods: {
      formatterSex(rows, column) {
        // 0表示男,1表示女,存儲數據庫中的類型爲int類型0或1
        return rows.sex == 0 ? "男" : "女";
      },
}

3.效果展示
數據庫中數據如下:


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章