element表格动态渲染多出一列

Question

<el-table :data="weekData"
                  border
                  :cell-style="cellStyle">
          <el-table-column v-for="(col, index) in weekHeader"
                           :key="index"
                           :prop="col.prop"
                           :label="col.label"
                           width="60px">
          </el-table-column>
        </el-table>

然后我就给假数据测试一下，js部分：

weekHeader: [
        { prop: 'Mon', label: '一' },
        { prop: 'Tues', label: '二' },
        { prop: 'Wed', label: '三' },
        { prop: 'Thur', label: '四' },
        { prop: 'Fri', label: '五' },
        { prop: 'Sat', label: '六' },
        { prop: 'Sun', label: '七' }
      ],
      weekData: [
        { Mon: '13', Tues: '14', Wed: '15', Thur: '16', Fri: '17', Sat: '18', Sun: '19' }
      ]

效果是这样：

居然多出一列，请问大家是什么原因？

Answer 1

你给每一列都设了宽度，所有列的宽度和比表格的宽度小，就会出现这种情况