问题

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

思路

  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

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

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

标签智能推荐:

前端入门到入土

前端入门到入土7、Vue框架

前端语言

前端语言目录:一、HTML语法前端(HTML语言)二、CSS语法前端(CSS语言-属性汇总)前端(CSS语言-详解)前端(CSS语言-实例)三、JavaScript语法前端(JavaScript语言)前端(BOM)前端(DOM)四、JQuery语法前端(JQuery语言)jQuery.serializer()序列化五、Bootstrap语法前端(Bootstrap语言)六、VUE语法nodejs初

vue推荐文章

你听说过VUE嘛?10个你可能不知道的Vue开发小技巧困扰99%前端程序员的Vue问题,全在这了(含代码)作为一位Vue工程师,这些开发技巧你都会吗?真正的手摸手带你实现Vue组件库手把手教你写一个Vue组件发布到npm且可外链引入使用从零搭建Vue开发环境一份关于vue-cli3项目常用项配置分享8个非常实用的Vue自定义指令Vue开发之vue-router的基本使用一文带你看透Vue前端路由&

今日前端

【今日前端-3.11】promise和asyncawait区别?分别用在何种情况?【今日前端】vue中$router和$route的区别?

初识Vue

分析大神的类网易云音乐网站,作为入门项目地址:https://github.com/sl1673495/vue-netease-music.git项目构成前端主要用Vue进行展示服务端用nodejs调用网易云音乐api前端工具vue:主要页面搭建element-ui:用其中的按钮、跑马灯等ui组件美化显示vue-router:路由,简化页面跳转(制定url跳转到组件的规则)axios:封装requ

VUE复习全家桶

异步组件(Vue动态组件以及异步组件--Vue高级特性)五、keep-aliveVue动态组件以及异步组件--Vue高级特性)六、mixin混合Vue动态组件以及异步组件--Vue高级特性)Vue周边工具一、vuex(Vuex简单实例以及安装遇到的坑)二、vue-router(vue路由总结以及面试准备)Vue原理一、组件化和MVVM(mvvm模式和mvc模式概述总结对比)二、响应式原理(Vue响

vue框架-简单介绍

##############理解这个后端的MVC模型,以及前端的MVVM模型,###通过一段最基础的vue代码,来体验什么是mvvm模型,先引入vue的包&lt;!--1,引入vue的包--&gt;&lt;scriptsrc="./vue.js"&gt;&lt;/script&gt;##############

Python之路博客目录

n函数&nbsp;Python模块Python面向对象&nbsp;&nbsp;网络编程并发编程&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Python额外知识MySQL数据&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MySQL索引原理使用Python操作MySQL数据库前端前端基础:HTML内容前端基础:CSS前端基础:JavaScript前端基础:BOM和DOM前

Vue:列表展示 用户管理-el-table

案例1:(vue-element-admin)前端技术不变,只是后台从mysql换成mongodb+nodejs下载:vue-element-admin+nodejs+mongodb:https://blog.csdn.net/saber04/article/details/107086249/

java架构师 前端 ssh/ssm框架,企业项目

前端ssh/ssm框架,企业项目Vue.js2.ElementUI3.axiosHow2J.cn-Java全栈学习网站Vue.js-渐进式JavaScript框架Element-网站快速成型工具下一篇:Vue+SpringBoot项目实战(二):搭建Vue.js项目&nbsp;java全套视频教程架构师前端ssh/ssm框架,企业项目java全套视频教程架构师前端ssh/ssm框架,企业项目jav