elementui表格需要根据值显示文字

在工作中,可能会遇到elementUI表格上线显示状态的值为(新建,处理中),显示出来却是对应的数字,的问题.

解决:

1.在elementUI表格结构上使用插槽.

<el-table-column label="状态"><template #default="scope"><!-- 插值表达式支持函数执行 并且渲染的是函数的return值 -->{{ formatEmployment(scope.row.zt) }}</template></el-table-column>

2.在 methods中定义这个函数.

formatEmployment (type) {// 根据源数据经过处理 把处理之后的数据返回// 定义一个映射结构const map = {10: '新建',20: '处理中',30: '审核不通过',40: '处理结束'}return map[type]}

效果图:

elementui表格需要根据值显示文字相关推荐

elementui表格内容超出隐藏显示省略号
elementui表格内容超出显示省略号,el-table控制属性::show-overflow-tooltip='true' <el-table:data="list"st ...
elementui 表格表头竖着显示_ElementUI中table表格自定义表头Tooltip文字提示
picture table-header-tips 应用 element 中的 table 组件,自定义表头 Tooltip 文字提示. 效果图效果图示例 demo 代码引用 element-u ...
elementui 表格表头竖着显示_element ui 表格表头纵向显示
element ui 提供了table ,根据对象数组动态展示表格,但是实际需求中,有很多竖向展示表格的需求效果图: 原本数据 data: [ { code: "weixin" ...
elementui 表格表头竖着显示_elementUI Table表格表头自定义
element UI 官方文档有一个 :render-header 的方法渲染自定义结构用的是 vue 的h函数也就是render 函数写法 //html align="center&q ...
elementui 表格表头竖着显示_Vue+Element自定义纵向表格表头教程
如下所示: 代码如下: {{ item.key }} {{ item.value }} 绑定的是 statDatas 属性是一个 json数组,由key value组成的json,如果需要多列就直接增 ...
【JavaScript+JinJa2】表格中将后台传入的None值显示为空字符串，将数据显示为int类型值
目的需要将数据库中取出的值进行前台展示. 为了使用easyui拓展中的排序功能,需要把表格中的值显示为int类型,但是如果是空字符串的话,转换为int会报错.如果全部转换为str的话,排序会出问题( ...
怎样让elementui表格里面的文字不换行，溢出隐藏，tooltip显示内容
通过设置elementui表格的列属性即可 :show-overflow-tooltip="true" 然后当超出的时候鼠标经过就有提示了
element-ui表格列金额显示两位小数
对于金额的显示,大多情况下需要保留两位小数,比如下面的(表格采用 element-ui): 在vue.js中,对文本的处理通常是通过设置一系列的过滤器,过滤器可以用在两个地方:双花括号插值和 v-b ...
ElementUI 的 el-select 设置值后显示value而不是label
问题: ElementUI 的 el-select 设置值后显示value而不是label 关键是这里: <el-option label="在职" value=" ...
elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息
目的:elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息项目经理要求表格头部添加一个图标,鼠标移入提示用户字段包含的内容信息,以前没有开发过,故总结一下. 添加方法: 方法一 ...

elementui表格需要根据值显示文字

elementui表格需要根据值显示文字相关推荐

最新文章

热门文章