Question

如何确保每页菜单中的行文本不会被截断？

在带有vuetify 1.4.1的firefox 60.5中，当我去更改每页的行数时，我注意到菜单中断了“ 100”。

我试图从此更改它：

<v-data-table
  ...
  :rows-per-page-items="[5,10,25,50,100]"
  ...
/>

对此：

<v-data-table
   ...
   :rows-per-page-items="[{text:'5', value:5},...,{text:'100', value:100}]"
  ...
/>

认为拥有文字会有所作为-没什么。

更新：
另外，在<style scoped> ... </style>中，我尝试了以下多种组合，但均未成功：

/deep/ .v-list__tile__title {min-width: 30px;}
/deep/ .v-list__tile {min-width: 30px;}
/deep/ .v-list__tile__content {min-width: 30px;}
/deep/ .v-list__tile__title {min-width: 30px;}
/deep/ .v-select-list {min-width: 80px;}
/deep/ .v-menu__content{min-width: 80px;}

Answer 1

您应该在数据中进行设置，然后在表格中访问它。像这样：

componentDidMount () {
    tracking.ColorTracker.registerColor('red', function(r, g, b) {
        if (r > 175 && g < 90 && b < 90) {
            return true;
        }
        return false;
    });

    this.tracker = new window.tracking.ColorTracker("red")

    $('#img').reel({
        frames: "360",
        images: "src/components/cascadion/pics/cascadion/Cascadio2017 360 turn 06__####.png",
    })

    this.tracker.on('track', event => {

        let hotspots = JSON.parse(JSON.stringify(this.state.hotspots))

        this.state.hotspots.map(function(hotspot){
            var cords = event.data.reduce((acc, point) => {
                if (point.x == hotspot.x && point.y == hotspot.y){
                    return point
                } else {
                    return (
                        Math.abs(acc.x - hotspot.x) > Math.abs(point.x - hotspot.x) && Math.abs(acc.y - hotspot.y) > Math.abs(point.y - hotspot.y)
                    ) ? point : acc;
                }
            }, hotspot);

            var h = hotspots.find(function(element) {
              return element.hotspot_id == hotspot.hotspot_id;
            });

            h.x = cords.x
            h.y = cords.y

            hotspots[h.id] = h

        })

        this.setState({
            hotspots: hotspots,
        })
    })
}

然后在设置数据表时：

data: () => ({
  pagination: {
    descending: true,
    page: 1,
    rowsPerPage: 5,
    totalItems: 0,
    rowsPerPageItems: [5, 10, 25, 50, 100],
  },
})

Answer 2

虽然不是理想的选择，但我还是采用了全局风格，而不是限定范围的风格。换句话说，我从<style scoped> ... </style>到<style> ... </style>。

在这种情况下，我使用了：

<style> 
  .v-list__tile__title { 
    min-width: 3em;
  }
</style>

调整vuetify数据表“行数”菜单宽度，因为文本被截断了

2 个答案: