问题

如何给列表数据打标签?类似下面这种样子

思路

  1. 数模转化(对接口请求回来的数据进行过滤标记,返回新的数据)
  2. 渲染新的数据模型

实现

1、过滤数据,需要打标签的采用jsx写法

业务数据的处理我封装在 mixins 里面

// 存放全局的mixin, 可拆分到模块独享

import { mapGetters } from 'vuex'
import { fetchListData } from '@/api/global/api.js'
export default {
data() {
return {
p_category: [],
listdata: [],
p_total: 0,
p_loading: false,
}
},
computed: {
// ...mapGetters(['productLevel', 'productLevelInfo']),
p_listdata() {
const data = this.listdata;
data.forEach((item) => {
// ...
// jsx 方式,打标签
if (item.status === 2 || item.status === 3) {
item.status = <span style={{color: '#999'}}>停售</span>
} else {
item.status = item.status
}
if (item.age <= 25) {
item.age = <span class="badge_info">{item.age}</span>
}
if (item.sex === 'Man') {
item.sex = <span class="badge_default">{item.sex}</span>
}
})
return data;
}
},
methods: {
async getProductList(params = {}) {
try {
this.p_loading = true
this.listdata = []
const res = await fetchListData(params)
if (res.code === 0) {
const { data = [], total = 0 } = res || {}
if (Array.isArray(data)) {
this.listdata = [...data]
this.p_total = total
} else {
this.listdata = []
this.p_total = 0
}
} else {
this.listdata = []
this.p_total = 0
this.$message.error(res.message || '出错了')
}
this.p_loading = false;
} catch (err) {
this.p_loading = false
this.listdata = []
this.p_total = 0
console.log(err);
}
}
}
}

base.less 定义标签样式

.badge_info {
color: #4760f0;
background: #1C84C6;
padding: 5px 8px;
color: #fff;
border-radius: 5px;
} .badge_default {
color: #4760f0;
background: #4760f0;
padding: 5px 8px;
color: #fff;
border-radius: 5px;
}

2、封装列表渲染组件

<template>
<ul class="listV2">
<li class="listV2_row-title">
<span v-for="(col, index) in fieldList" :key="index" class="listV2_cell ellipsis" :name="col.fieldName">
{{col.fieldLabel}}
</span>
</li>
<!-- 行 -->
<div v-if="tableData.length === 0" class="nodata">暂无数据</div>
<li v-for="(row, index) in tableData" :key="index" class="listV2_row pointer" @click="rowClickToDetail(row)">
<!-- 单元格-列 -->
<span v-for="(col, index) in fieldList" :key="index" class="listV2_cell ellipsis" :name="col.fieldName">
<RenderDom :vNode="row[col.fieldName] || '-'"></RenderDom>
</span>
</li>
</ul>
</template> <script>
import RenderDom from "./renderDom";
export default {
name: 'TableList',
props: {
tableData: {
type: Array,
required: true,
},
fieldList: {
type: Array,
required: true,
},
align: {
type: String,
default: 'left',
},
},
components: {
RenderDom,
},
data() {
return {}
},
computed: {},
watch: {},
created() { },
mounted() { },
methods: {},
updated() { },
beforeDestroy() { },
}
</script> <style lang='less' rel='stylesheet/less' scoped>
@import "./index.less";
</style>

3、封装渲染vNode的方法

const renderDom = {
props: {
vNode: {
type: [Array, String, Object,Number],
},
},
render(h) {
// jsx - vNode 直接返回,交给框架处理(js语法带来很多可能,列表打标签功能)
if (typeof this.vNode === 'object') {
return this.vNode;
}
// 普通数据,直接包一层div,然后返回给页面
return h(
'div',
{
class: 'ellipsis',
},
this.vNode
)
}
}

4、页面组件调用

<template>
<div class="customer">
<table-list v-loading="p_loading" :tableData="p_listdata" :fieldList="fieldList"></table-list>
</div>
</template> <script>
import TableList from '@/basecomponents/TableList/index'
import $_pMixins from "@/mixins/product.js";
import enums from './enum.js'
export default {
name: 'Customer',
props: {},
components: {
'table-list': TableList,
},
mixins: [$_pMixins],
data() {
return {
tableData: [],
fieldList: Object.freeze(enums.Enum_customerFieldList),
}
},
computed: {},
watch: {},
created() {
},
mounted() {
this.initData()
},
methods: {
initData() {
this.getProductList()
}
},
updated() { },
beforeDestroy() { },
}
</script> <style lang='less' rel='stylesheet/less' scoped>
@import "./index.less";
</style>

效果展示


我是 甜点cc

热爱前端,也喜欢专研各种跟本职工作关系不大的技术,技术、产品兴趣广泛且浓厚,等待着一个创业机会。主要致力于分享实用技术干货,希望可以给一小部分人一些微小帮助。

我排斥“新人迷茫,老人看戏”的现象,希望能和大家一起努力破局。营造一个良好的技术氛围,为了个人、为了我国的数字化转型、互联网物联网技术、数字经济发展做一点点贡献。数风流人物还看中国、看今朝、看你我。

通过vNode实现给列表字段打标签的更多相关文章

  1. sharepoint 2013 列表和库标签 元数据导航配置(2)

    接前面提到的,如何创建一个术语库.sharepoint 2013 列表和库标签 元数据导航配置(1), 现在要做的,就是如何在自定义或者文档库中使用这个术语库,实现标签功能,通过这些标签,找到对应的文 ...

  2. elementui中的el-table中拼接两个列表字段

    我们知道,在ElementUI中我们是使用下面的语法来展示列表字段的: <el-table :data="yanggbs" stripe style="width: ...

  3. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  4. ArcGis之popup列表字段自定义

    ArcGis之popup列表字段自定义 featureLayer图层中可以使用popupTemplate属性添加弹窗. API:https://developers.arcgis.com/javasc ...

  5. 定制化fiddler会话列表字段

    前言:fiddler默认会话列表已有一些显示字段,可能并不是我们需要的,我们可以自行定制化. 以会话耗时为例: 目录 1.方法一:修改js脚本 2.方法二:通过菜单栏设置 1.方法一:修改js脚本 点 ...

  6. Python字典列表字段重组形成新的字典

    最近遇到这样一个需求,需要将字典列表中的字段进行重组,形成一个新的字典.举个例子吧: l1 = [{"x": 22, "y": 22, "demand ...

  7. HTML列表(组标签)+div(布局标签)与span

    一.列表 HTML中常见的列表有三种,分别是: 1.无序列表,是一组描述列表语义的组标签,列表中每个项之间没有先后顺序:如图: 1)组标签:组标签就是由多个标签组成的一个整体,它们之间共同存在:例如 ...

  8. img、列表和table标签

    一.img图片 <body> <a href="https://www.fmtxt.com"> <img src="images/1.jpg ...

  9. 列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)

    列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value= ...

  10. k3 cloud中列表字段汇总类型中设置了汇总以后没有显示出汇总值

    处理方法,需要bos中的分组列信息中设置求和: 选择对应字段将其从左侧添加到右侧 方法二: 直接针对[价税合计]字段的列表汇总类型进行设置,步骤如下图所示

随机推荐

  1. Atitit .html5刮刮卡的gui实现总结

    Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....posti ...

  2. NAND FLASH均衡算法笔记(转)

    转来一篇关于NAND FLASH均衡算法的文章,加上一点思考和笔记,认为这种思考有助于更深刻的理解,更好的记忆,所以也算半原创了吧,最起码笔记是原创的.有意思的是,帖子提起这个算法并不是因为嵌入式开发 ...

  3. 第22章 项目3:万能的XML

    Mix-in:混入类,是一种Python程序设计中的技术,作用是在运行期间动态改变类的基类或类的方法,从而使得类的表现可以发生变化.可以用在一个通用类接口中. 在实践一个解析XML文件的实践中,体会动 ...

  4. JS 页面打印

    var hkey_root, hkey_path, hkey_key hkey_root = "HKEY_CURRENT_USER" hkey_path = "\\Sof ...

  5. Context

    Context,中文直译为“上下文”,SDK中对其说明如下: Interface to global information about an application environment. Thi ...

  6. jquery之stop()的用法

    // 为了看效果,随意写的动画 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal' ...

  7. C# ?? 运算符,不能忘记的知识点

    最近项目中有一个bug被测试(是黑盒测试)发现了,跟了老半天代码,才找到这个问题的所在,原来是一个计算表达式中用到了??运算符,才导致了这个错误,下面让我简单讲述一下. C# ?? 运算符 msdn上 ...

  8. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第7章节--打包并部署SP2013 Apps 打包并公布App

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第7章节--打包并部署SP2013 Apps 打包并公布App         如今既然你理解了一个app的四个主要部分, ...

  9. Java异常抛出及try,catch应用实例

    class lanpingException extends Exception { lanpingException(String msg) { super(msg); } } class maoy ...

  10. 服务网关基于RPC的用法

    企业为了保护内部系统的安全性,内网与外网都是隔离的,企业的服务应用都是运行在内网环境中,为了安全的考量,一般都不允许外部直接访问.API网关部署在防火墙外面,起到一层挡板作用,内部系统只接受API网关 ...