Question

我正在尝试修复height tbody display: block，而不使用const columnResizable = { inserted: function(el) { var thElm; var startOffset; var thead = el.getElementsByTagName('thead')[0]; function handleHeadColumn(th) { th.style.position = 'relative'; var grip = document.createElement('div'); grip.innerHTML = " "; grip.style.top = 0; grip.style.right = 0; grip.style.bottom = 0; grip.style.width = '2px'; grip.style.marginLeft = '3px'; grip.style.marginRight = '3px'; grip.style.backgroundColor = '#e8e7e7'; grip.style.position = 'absolute'; grip.style.cursor = 'col-resize'; grip.addEventListener('mousedown', function setActiveColumn(e) { thElm = th; startOffset = th.offsetWidth - e.pageX; }); th.appendChild(grip); } Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), handleHeadColumn); thead.addEventListener('mousemove', function handleColumnMovement(e) { if (thElm) { var tds = el.querySelectorAll("tbody td:nth-child(" + (thElm.cellIndex + 1) + ")"); var width = startOffset + e.pageX + 'px'; tds[0].style.width = width; tds[0].width = width; tds[0].minWidth = width; thElm.width = width; thElm.style.width = width; thElm.minWidth = width; } }); thead.addEventListener('mouseup', function unsetActiveColumn() { thElm = undefined; }); }, unbind: function(el) { var thead = el.getElementsByTagName('thead')[0]; thead.removeEventListener('mousemove'); thead.removeEventListener('mouseup'); Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"), function removeEventHandle(th) { var grip = th.getElementsByTagName('div')[0]; grip.removeEventListener('mousedown'); } ); } } var app = new Vue({ el: '#app', data: { photos: [] }, methods: { load() { const url = 'https://jsonplaceholder.typicode.com/photos'; fetch(url) .then(response => response.json()) .then((photos) => { this.photos = photos; }) } }, mounted() { this.load(); }, directives: { columnResizable } })解释here和here，因为我通过dragdrop处理列大小

table {
  margin-bottom: 0;
  table-layout: fixed;
  width: 100%;
  position: relative;
}

table>tbody {
  max-height: 400px;
  height: 400px;
  overflow-y: auto;
  display: block;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>

<div id="app">
  <table v-column-resizable="">
    <thead>
      <tr>
        <th>Id</th>
        <th>Title</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="photo in photos">
        <td>{{photo.id}}</td>
        <td class="ellipsis">{{photo.title}}</td>
        <td class="ellipsis">{{photo.url}}</td>
      </tr>
    </tbody>

  </table>
</div>

display:block

正如你所看到的......没有用......

如果我从tbody移除<WebBrowser x:Name="browser" HtmlText="{Binding PdfFile}"/> ..有效...但我需要修复身高。

如何在没有可调整大小的列的情况下修复tbody高度

Answer 1

我发现我是一个解决方法..不是一个完美的解决方案，但有效。

我带回了tr

的行为

table thead, table tbody tr {
    ....
    display:table;
    table-layout:fixed;
}

table > tbody {
    ....
    display: block;
}

当用户拖放列时，我会再次修复所有行的列大小。

const columnResizable = {
  inserted: function(el) {
    var thElm;
    var startOffset;

    var thead = el.getElementsByTagName('thead')[0];

    function handleHeadColumn(th) {
      th.style.position = 'relative';
      var grip = document.createElement('div');
      grip.innerHTML = "&nbsp;";
      grip.style.top = 0;
      grip.style.right = 0;
      grip.style.bottom = 0;
      grip.style.width = '2px';
      grip.style.marginLeft = '3px';
      grip.style.marginRight = '3px';
      grip.style.backgroundColor = '#e8e7e7';
      grip.style.position = 'absolute';
      grip.style.cursor = 'col-resize';
      grip.addEventListener('mousedown', function setActiveColumn(e) {
        thElm = th;
        startOffset = th.offsetWidth - e.pageX;
      });
      th.appendChild(grip);
    }
    Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"),
      handleHeadColumn);

    thead.addEventListener('mousemove', function handleColumnMovement(e) {
      if (thElm) {
        var tds = el.querySelectorAll("tbody td:nth-child(" + (thElm.cellIndex + 1) + ")");
        var width = startOffset + e.pageX + 'px';
        tds[0].style.width = width;
        tds[0].width = width;
        tds[0].minWidth = width;
        thElm.width = width;
        thElm.style.width = width;
        thElm.minWidth = width;
      }
    });
    thead.addEventListener('mouseup', function unsetActiveColumn() {
      thElm = undefined;
    });
  },
  unbind: function(el) {
    var thead = el.getElementsByTagName('thead')[0];
    thead.removeEventListener('mousemove');
    thead.removeEventListener('mouseup');
    Array.prototype.forEach.call(thead.querySelectorAll("th:not(:last-child)"),
      function removeEventHandle(th) {
        var grip = th.getElementsByTagName('div')[0];
        grip.removeEventListener('mousedown');
      }
    );
  }
}

var app = new Vue({
  el: '#app',
  data: {
    photos: []
  },
  methods: {
    load() {
      const url = 'https://jsonplaceholder.typicode.com/photos';
      fetch(url)
        .then(response => response.json())
        .then((photos) => {
          this.photos = photos;
        })
    }
  },
  mounted() {
    this.load();
  },
  directives: {
    columnResizable
  }
})

table {
  margin-bottom: 0;
  width: 100%;
}
table thead, table tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

table > tbody {
    max-height: 400px;
    height:400px;
    overflow-y:scroll;
    display: block;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.min.js"></script>

<div id="app">
  <table v-column-resizable="">
    <thead>
      <tr>
        <th>Id</th>
        <th>Title</th>
        <th>URL</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="photo in photos">
        <td>{{photo.id}}</td>
        <td class="ellipsis">{{photo.title}}</td>
        <td class="ellipsis">{{photo.url}}</td>
      </tr>
    </tbody>

  </table>
</div>

Answer 2

我尝试编辑小提琴链接（https://jsfiddle.net/hashem/CrSpu/554/ 你在上面提到它并且在那里工作。

我只对CSS进行了更改。

openCV

设置tbody的高度没有显示：块

2 个答案: