vue elementUI filter 前端接收后端数值显示成对应结果

后台数据库传回来的一个类型数据，用的1，2，3表示的（'数据源类型：1-mysql，2-oracle，3-mqtt'）
然后前端渲染的时候，就只渲染成1，2，3
希望结果是渲染成对应的数据源

1. 加个过滤器filter

<el-table-column label="数据源类型" align="center" prop="dstype" >
    <template slot-scope="scope">
        {{ scope.row.dstype | capitalize }}
    </template>
</el-table-column>

2. 编写对应的方法,filter和data()同级

data(){...},
filters:{
    capitalize: function (value) {
      if (value === 1){
        return "mysql"
      }else if (value === 2){
        return "oracle"
      } else {
        return "mqtt"
      }
    }
},

3. 在select标签中，要在value前面加上:进行绑定，因为数值类型和布尔类型是需要绑定的

<el-form-item label="数据源类型" prop="dstype">
    <el-select v-model="form.dstype" placeholder="请选择数据源类型">
            <el-option label="mysql" :value="1" />
            <el-option label="oracle" :value="2" />
            <el-option label="mqtt" :value="3" />
    </el-select>
</el-form-item>