Usage of the formatter attribute of El table

One 、formatter What is it? ？

formatter yes el-table-column A property of , Used to format content .（ For example, the backstage returns 0 or 1, You need to show it as “ no ” and “ yes ”）

Two 、 Detailed use

1. know formatter Before ：

The code is as follows （ Example ）：

 <el-table :data="tabledata">
      <el-table-column label=" type "  prop="type">
          <template slot-scope="scope">
                <span>
                  <span v-if="scope.row.type === '1'"> menu </span>
                  <span v-else-if="scope.row.type === '2'"> Button </span>
                  <span v-else> other </span>
                </span>
            </template>
      </el-table-column>
   </el-table>

2. know formatter after , The above code can be rewritten as ：

html in ：

 <el-table :data="tabledata">
      <el-table-column label=" type " :formatter="typeFormatter" prop="type"></el-table-column>
 </el-table>

methods in ：

// Normalized type   There are four parameters by default （row, column, cellValue, index） Details can be found at elmentUI Official website 
      typeFormatter(row){
    
	        switch(row.type){
    
	          case '1':
	            return ' menu '
	          case '2':
	            return ' Button '
	          default:
	            return ' other '
	        }

      }

---

summary

Blogging is for taking notes ！