VueJS Bootstrap< date-picker>隐藏在行中< b-table>

mfpqipee 于 2023-10-23 发布在 Vue.js

关注(0)|答案(2)|浏览(133)

我正在使用VueJS（v2.6.10）和boostrap-vue（v2.0），并试图允许用户使用using vue-bootstrap-datetimepicker（v5.0.1）为<b-table>中的记录输入日期时间。
问题是当点击输入字段时，<date-picker>总是隐藏的。允许用户在<b-table>行（如果有的话）中为输入字段选择日期/时间的正确方法是什么？

<b-table bordered :items="items" :fields="visibleFields">
...
    <template slot="next_scheduled_time" slot-scope="row">
      <div style="font-size: 20px; font-weight: bold; position: relative;" class="d-flex align-items-center justify-content-center">
        <date-picker style="width:140px" v-model="row.item.next_scheduled_time" :config="datetime_options" :placeholder="row.item.next_scheduled_time"/>
      </div>
    </template>
...
</b-table>

vue.js

来源：https://stackoverflow.com/questions/77216801/vuejs-bootstrap-date-picker-is-hidden-in-b-table-row

2条答案

按热度按时间

gtlvzcf81#

插槽语法不正确。正确的语法可以在Bootstrap Vue文档中看到。
作用域字段槽使用以下命名语法：'cell（' + field key + '）'
给定一个字段next_scheduled_time，插槽将是：

<template #cell(next_scheduled_time)="data">
  <div
    style="font-size: 20px; font-weight: bold; position: relative"
    class="d-flex align-items-center justify-content-center"
  >
    <date-picker
      v-model="data.item.next_scheduled_time"
      :config="options"
    ></date-picker>
  </div>
</template>

当我在codesandbox中测试时，上面的代码工作正常。

赞(0）回复(0）举报 2023-10-23

jm2pwxwz2#

在另一个vue文件中使用此CSS的范围不正确的块是问题.

td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

赞(0）回复(0）举报 2023-10-23

我来回答

VueJS Bootstrap< date-picker>隐藏在行中< b-table>

2条答案

相关问题

热门标签

最新问答