javascriptvue.jselement-uielement-plus

How to insert other values into table column Vue3 Element-plus

I have an array of objects from database and objects have property 'sex' that equals 1 or 2. How can i convert these values to male(1) or female(2) using el-table?

I have no idea how to use this lib so i tried many things like inserting in el-table-column some values using v-if and it didn't work.

Solution

  • So, I found an answer to my question.I needed to insert default scope template into the header column without prop so i can pass my own value.

    <el-table-column prop="patron" label="Patron"></el-table-column>
<el-table-column  label="Sex">
  <template #default="scope">
    <span v-if="scope.row.sex === 1">Male</span>
    <span v-else-if="scope.row.sex === 2">Female</span>
  </template>
</el-table-column>
<el-table-column prop="dept" label="Dept"></el-table-column>