时间戳

首页 > 解决方案 > Vue.js 表中隐藏/显示列的复选框无法正常工作

javascript - Vue.js 表中隐藏/显示列的复选框无法正常工作

问题描述

我制作了一个 vue.js 引导表，用于从本地 JSON 文件加载一些数据。我正在尝试通过复选框实现显示/隐藏列。我想我已经解决了大部分问题，但问题是当我隐藏一列然后再次按下同一个复选框（使列再次可见）时，我失去了表的顺序（该列成为最后一列），所以在。例如，如果我隐藏“时间戳”列，它是我表中的第一个表头，然后按下再次显示它，它不再位于第一位，而是在最后一个位置创建。

https://imgur.com/BaTfgci --> 这就是应用程序现在的样子 https://codepen.io/frane_caleta/pen/KKPMKrL --> 我的代码的codepen，没有你将无法加载它JSON 文件虽然 https://imgur.com/a/23jx0lZ --> JSON 数据示例

第一次在这里提问，如果您需要更多信息来解决问题，请随时问我:)

<b-form-group label="Hide columns: ">
  <b-form-checkbox-group id="checkbox-group-1" v-model="selected" :options="fields" name="flavour-1">
  </b-form-checkbox-group>
</b-form-group>

//my table
<b-table id="myTable" 
         :small="small" 
         :bordered="bordered"
         hover head-variant="dark"  
         stacked="md" 
         :items="cptItems" 
         :fields="selected" 
         :current-page="currentPage"
         :per-page="perPage" 
         :filter="filter" 
         :sort-by.sync="sortBy" 
         :sort-desc.sync="sortDesc"
         @filtered="onFiltered"
         :tbody-tr-class="rowClass"
          v-if="selected.length > 0">
</b-table>

//Javascript file
function initializeVue() {
  return new Vue({
        el: '#app',
        data() {
          return {
            items: data.logdatas,
            selected: [],
            fields: [{
                  text: 'Origin',
                  value: {
                    key: 'origin',
                    label: 'Origin',
                    sortable: true,
                    class: 'text-center',
                    index: 0
                  }
                },
                {
                  text: 'Timestamp',
                  value: {
                    key: 'timeStamp',
                    label: 'Timestamp',
                    sortable: true,
                    class: 'text-center',
                    index: 1
                  }
                },
                {
                  text: 'Level',
                  value: {
                    key: 'level',
                    label: 'Level',
                    sortable: true,
                    class: 'text-center',
                    index: 2
                  }
                }, ...there are 4 more fields here like this...

                //my method for creating those checkboxes
                created() {
                  this.selected = this.fields.map(field => field.value);
                }

标签： javascriptvue.jsvuejs2bootstrap-vue

解决方案

数据是你的selected罪魁祸首。b-checkbox-group :selection按选择顺序列出项目。

示例2

b-table :fields按项目的顺序列出列。

最好制作一个静态fields列表并按selection.

// make this data or property
let columnNames = ["one", "two", "three", "infinity", "pi"];

// make this data
let selected = []

//make this computed // can be optimized 
let activeFields = columNames.filter(name => selected.includes(name))

// more like this
export default {

  data(){
    return {
      selected: [],
      columnNames: ['name1', 'name2']
  },
  computed(){
    activeColumns(){

      return this.columnNames.filter(this.selected.includes) || []
  }
}


const app = new Vue({
  data(){
    return {
      currentPage: 0,
      perPage: 10,
      fields: ['age', 'first_name', 'last_name'],
      //selected: [],
      selected: ['age', 'first_name', 'last_name'],
      items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
    }
  },
  computed: {
    activeFields(){
      return this.fields.filter(name => this.selected.includes(name))
    }
  }
}).$mount("#app");
<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
<b-form-group label="Hide columns: ">
  <b-form-checkbox-group id="checkbox-group-1" v-model="selected" :options="fields" name="flavour-1">
  </b-form-checkbox-group>
</b-form-group>


<b-table id="myTable" 
         
         :bordered="true"
         hover head-variant="dark"  
         stacked="md" 
         :items="items" 
         :fields="selected" 
         :current-page="currentPage"
         :per-page="perPage" 
         tbody-tr-class="row-class"
          v-if="selected.length > 0">
</b-table>
<b-table id="myTable" 
         
         :bordered="true"
         hover head-variant="dark"  
         stacked="md" 
         :items="items" 
         :fields="activeFields" 
         :current-page="currentPage"
         :per-page="perPage" 
         tbody-tr-class="row-class"
          v-if="selected.length > 0">
</b-table>
</div>

推荐阅读