问题
如何给列表数据打标签?类似下面这种样子
思路 实现
- 数模转换(对接口请求回来的数据进行过滤标记,返回新的数据)
- 渲染新的数据模型
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 = 停售 } else { item.status = item.status } if (item.age <= 25) { item.age = {item.age} } if (item.sex === 'Man') { item.sex = {item.sex} } }) 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、封装列表渲染组件
- {{col.fieldLabel}}
暂无数据
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、页面组件调用
效果展示
以上就是使用vNode实现给列表字段打标签的详细内容,更多关于vNode列表字段标签的资料请关注脚本之家其它相关文章!