vue2.0 遍历数组获得的标签中，怎样能给其中的一个绑定v-bind:style="padding-left"过滤掉其他的标签

Question

代码如下：
<td v-for="obj in option" @click="implement(obj)" v-if="obj.valueType === 'String' || obj.valueType === 'dataTypeList'" v-bind:style="'padding-left:'+ option['paddingLeft'] + 'px'">
</td>
<script>
data () {

    return {
      options: [
        {
          type: {valueType: 'String', value: '', showinput: false},
          Name: {valueType: 'String', value: '', showinput: false},
          field: {valueType: 'dataTypeList', value: ''},
          mock: {valueType: 'String', value: '', showinput: false},
          note: {valueType: 'String', value: '', showinput: false},
          level: '1',
          AddChirl: '',
          class: 'list-1',
          paddingLeft: 0
        }
      ]
   }

</script>
遍历出来5个td列，我只想给第一个td加上左内边距，v-bind:style="'padding-left:'+ option['paddingLeft'] + 'px'"，其余四个td都不要做内边距，因为我每次增加一行，第一个td的padding-left都会加10px，而其他列的内边距是不变的

Answer 1

如果你的 paddingLeft 是固定的话 应该用 CSS 做

SCSS

tr {
  td:nth-child(1) {
    padding-left: 10px;
  }
}

如果是不固定的值 别忘了 v-for 还会带上索引
https://cn.vuejs.org/v2/guide...

<td v-for="(item, index) in options" 
    :style="{ 'padding-left': index === 0 ? options.paddingLeft : 0 }">
</td>