vue+element中表格显示不同的状态

2019-06-26 admin

实现效果如下:下拉选择中有不同的选项,表格中也会显示多种状态 图片描述

搜索中 input表单内容

<el-form-item label="工单状态">
   <el-select v-model="queryForm.state" clearable placeholder="请选择">
      <el-option v-for="(item, index) in config.gzdStateList" :key="index" :value="index" :label="item"></el-option>
   </el-select>
</el-form-item>

表格中 状态内容显示

<el-table-column prop="state" label="工单状态" min-width="80px">
    <template slot-scope="scope">
         <span>{{config.gzdStateList[scope.row.state]}}&nbsp;</span>
         <div style="color:#409EFF;cursor:pointer" @click="viewDetail(scope.row)">查看详情</div>
    </template>
</el-table-column>

gzdStateList 在config中定义,因为在很多地方用到

    const config = {
        gzdStateList: {
            0: '已派装维',
            1: '已预约',
            2: '已回执(待归档)',
            3: '已归档',
            4: '待转派',
            5: '待撤单',
            6: '已撤单',
            },  
    }
export default config

[转载]原文链接:https://segmentfault.com/a/1190000019589433

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-68273.html

文章标题:vue+element中表格显示不同的状态

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
可以从CSS框架中借鉴到什么
现在很多人会使用 CSS 框架进行快速建站。   那 CSS 框架是什么呢,它通常是一些 CSS 文件的集合,这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置。使用 CSS 框架大大降低工作成本进行快速建站。   当然对于一些大...
2016-03-11
layui表格checkbox选择全选样式及功能的实
在之前的版本,默认复选框是要有值得,默认为“勾选”两个字,在表格里用来做选择不适合,很难改,还好layui升级后,可以支持不写name值,来适应表格中的选择操作。 1、layui版本号为 v1.0.9 rls版本(当前最新版本) &lt;s...
2018-03-08
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
回到顶部