Vue匹配数据字典/封装组件（小demo）

需求：把表格第2、3列的文字，加上颜色

第1列	第2列	第3列	第4列
标题1	10	20	30
标题2	40	50	60

#后台配置color，可能不止是2、3列变色！
items: {
  "list": [
    ["标题1", 10, 20, 30],
    ["标题2", 40, 50, 60],
    ["标题3", 70, 80, 90],
  ],
  "color": [
    {
      "index": 1,
      "color": "#2c86eb"
    },
    {
      "index": 2,
      "color": "#ffa500"
    }
  ]
}

Vue第一种实现 v-html

methods: {
  color(row, idx, items) {
    let obj = {};
    let color = items.color.filter(d => d.index === idx);

    obj = {value: row, idx, color: color.length ? color[0].color : ''};

    return `${obj.value}`
  }
}

Vue第二种实现 自定义组件

Vue第三种实现 css3 （适合小程序）

# class=rows里面的结构可以看出，有颜色的span在上面，隐藏没颜色的span就可以了

#从td里找第二个span，然后隐藏