filters中的this问题，及在computed中调用函数

背景

• 过滤器内this的指向是undefined，因而不能在过滤器内使用this引用组件实例的变量或者方法
• vue中过滤器更偏向雨文本数据的转化
  我们可以使用computed作为替代方案

格式化字段的方式

1、在methods添加方法

<el-table-column label="文件状态" align="center" prop="fileState" :formatter="fileStateFormat"/>

//methods
 fileStateFormat(row,column){
  	return this.selectDictLabel(this.fileStateList, row.fileState);
  },
 selectDictLabel(datas, value) {
	var actions = [];
	Object.keys(datas).map((key) => {
		if (datas[key].dictValue == ('' + value)) {
			actions.push(datas[key].dictLabel);
			return false;
		}
	})
	return actions.join('');
}

2、使用过滤器

<el-table-column label="文件状态" align="center" prop="fileState" >
    <template slot-scope="scope">
     <el-button type="primary" size="mini">{{scope.row.fileState | formateState }}</el-button>
   </template>
 </el-table-column>

3、使用computed

 <el-table-column label="文件状态" align="center" prop="fileState" >
    <template slot-scope="scope">
     	<el-button type="primary" size="mini">{{fileStateCom(scope.row.fileState) }}</el-button>
   	</template>
 </el-table-column>

//computed
computed: {
 fileStateCom(){
      return function (value) {
        return this.selectDictLabel(this.fileStateList, value);
      }
    },
},