iview Table 修改样式

思路1:自己写table、thead、tfoot、tbody、tr、td等的样式以及是适配样式。

思路2:自己写样式,覆盖想要修改的样式

自己定义small-table样式,放在table上面,然后依次修改自己想要的进行覆盖



export default {
  name: 'CollectingSilver',
  components: {
    memberS, ProId
  },
  data () {
    return {
      vipProductColumns: [
        {title: '项目编号',key: 'proNumber', align: 'center'},
        {title: '项目名称',key: 'proName', align: 'center'},
        {title: '总次数',key: 'totalDegree', align: 'center'},
        {title: '剩余次数',key: 'Remainder', align: 'center'}
      ],
      data3: [
        {
          proNumber: 31313,
          proName: '洗吹剪',
          totalDegree: 30,
          Remainder: 30
        },
        {
          proNumber: 43121,
          proName: '多了去了',
          totalDegree: 30,
          Remainder: 30
        },
        {
          proNumber: 43121,
          proName: '吃肉',
          totalDegree: 30,
          Remainder: 30
        },
        {
          proNumber: 43121,
          proName: '吃牛肉',
          totalDegree: 30,
          Remainder: 30
        }
      ]
    }
  },

效果图:

iview Table 修改样式_第1张图片

padding:18px;覆盖为 padding:0

height:40px;覆盖为 height:0

优点:不需要全部重写适配样式

你可能感兴趣的:(vue)