随记1-表格显示中文

ElementUI 表格中显示中文

1.前台写死状态选项信息

状态信息显示为中文 后台状态信息代码：

代码如下：

// table表格中代码 // 其中INIT、RELEASE为后台状态信息的分类 // 重点是template中的代码 <el-table> <el-table-column label="状态" prop="state"> <template slot-scope="scope"> <span> <div v-if="scope.row.state==='INIT'">初始</div> <div v-else-if="scope.row.state==='RELEASE'">发布</div> </span> </template> </el-table-column> </el-table> // 新增模态框中代码 <el-dialog> <el-form-item label="状态" prop="state"> <el-select v-model="form.state" filterable @change="handleChange" placeholder="请选择状态信息"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-dialog> // data中options export default{ data() { return{ options: [{ value: 'INIT', label: '初始' },{ value: 'RELEASE', label: '发布' }], value: '' } } }

2.从后台获取状态信息

template中代码如下：

// table表格中代码 // 其中INIT、RELEASE为后台状态信息的分类 <el-table> <el-table-column label="状态" prop="state"> <template slot-scope="scope"> <span> <div v-if="scope.row.state==='INIT'">初始</div> <div v-else-if="scope.row.state==='RELEASE'">发布</div> </span> </template> </el-table-column> </el-table> // 新增模态框中代码 <el-dialog> <el-form-item label="状态" prop="state"> <el-select v-model="form.state" filterable @change="handleChange" placeholder="请选择状态信息"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> </el-dialog>

script中代码如下：

// <script> import Api from "./api"; export default{ data() { return{ options: [], value: '' } }, created(){ this.getTableData(); this.getState(); }, methods: { getState() { Api.getState().then(res=>{ this.options = res.data.rows console.log(this.options) }) }, // 获取数据 getTableData () { let that = this; let params = { page: this.page, pageSize: this.pageSize }; Api.queryAll() .then(res => { that.total = res.total; that.tableData = res.data.rows }) .catch(err => { console.error(err) }); }, } } </script>

api.js代码：

export default { // 查询 queryAll (params) { return $Http.get("/identity/version/queryAll", params); }, // 获取状态信息 getState(params) { return $Http.get("/identity/version/queryState",params); } };

后台代码：

// controller中 /** * 查询状态信息 * @return */ @GetMapping(value = "queryState") public ResultBean queryState(){ ResultBean resultBean = new ResultBean(); List<Map<String,Object>> resultList = new ArrayList<>(); ReleaseState[] list = ReleaseState.values(); for (ReleaseState detail : list){ Map<String,Object> map = new HashMap<>(); map.put("value",detail.name()); map.put("label",detail.getLabel()); resultList.add(map); } resultBean.setData(resultList); return resultBean; } // 其中ReleaseState为枚举类，代码如下 public enum ReleaseState implements CommonEnum<RoleType> { /** * 初始化 */ INIT("初始"), /** * 发布 */ RELEASE("发布"); final String label; ReleaseState(String label) { this.label = label; } @Override public String getLabel() { /*return this.getKey();*/ return label; } @Override public String getKey() { return super.name(); } }