vue使用elementUI中的table表格字符类型与数字类型

2021-08-28  本文已影响0人  兰觅

一.表格显示如下:使用表格中的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.效果展示
数据库中数据如下:


数据 效果显示
上一篇 下一篇

猜你喜欢

热点阅读