Bootstrap 有关引导表和复选框筛选的问题

ztigrdn8 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(107)

我正在构建一个vue应用程序，它使用Bootstrap-Vue Table的自定义版本。
我有一些数据，我正在提取与Axios。数据被放入一个表中，对于这个表，我允许用户使用复选框进行过滤，这些复选框链接到每个项目中的布尔值（可见）。因此，如果用户单击复选框“userStatus”，则userStatus列将从表中隐藏。

<template>
      <b-row>
        <b-col>
          <b-checkbox
            :disabled="visibleFields.length == 1 && field.visible"
            v-for="field in fieldsTest"
            :key="field.id"
            v-model="field.visible"
            inline>
            {{ field.label }}
          </b-checkbox>
        </b-col>
      </b-row>
  <div>
    <b-table striped hover :items="fieldsTest"></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        fieldsTest: [
      {
        key: 'userStatus',
        label: 'Status',
        sortable: true,
        sortByFormatted: true,
        visible: true

      },
      {
        key: 'userAge',
        label: 'Age',
        sortable: true,
        sortByFormatted: true,
        visible: true

      },
      {
        key: 'userName',
        label: 'Username,
        sortable: true,
        sortByFormatted: true,
        visible: true

      },
        ]
      }
    }
  }
computed: {
  visibleFields() {
    return this.fieldsTest.filter(field => field.visible)
  }

字符串
}
这就是问题所在。我不希望所有项目都有复选框。
例如，我有一个自定义的字段为表头，其中出口的数据到Excel。

{
        key: 'actions',
        template: {
          type: 'actions',
          head: [
            {
              type: 'export'
            }
          ],
          cell: this.actions
        }
      }

型
我不希望用户能够隐藏此字段。我希望它在表中始终可见，并且不希望它有复选框。
那么，当我执行v-for=“field in fieldsTest”时，我该如何排除这个字段呢？
附加问题：有没有可能保存用户的输入而不必给后端制造机会？因此，如果用户选中了某个框，则即使用户刷新页面，该框和所选字段的条件也将保持不变。在前端可以做到这一点吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/76760212/questions-regarding-bootstrap-tables-and-checkbox-filtering

1条答案

按热度按时间

uoifb46i1#

创建单独的computed（例如：filterableFields）返回您希望用户能够筛选的字段。使用任何对你的例子有意义的逻辑，例如：

//...
  computed: {
    filterableFields() {
      return this.fieldsTest.filter(({ filterable }) => filterable)
      // and add `filterable: true` to all the fields you want to allow
    },

    // or:
    filterableFields() {
      return this.filedsTest.filter((field) => !["actions"].includes(field.key))
      // exclude based on `field.key`
    }
  }

字符串
...并且，显然，在复选框v-for中使用filterableFields：

//...
  <b-checkbox v-for="field in filterableFields">
    //...
  </b-checkbox>

型
参考 “奖励问题”：不要把多个问题合并成一个问题。附加问题的任何潜在答案都不会被正确索引，也不会帮助其他用户解决相同类型的问题。记住，Stack Overflow之所以有效，是因为没有人在这里帮助 * 只有**提出问题的人，而且所有未来的访问者都有类似的问题。另外一个问题单独问。
是的，有可能。您可以使用Web Storage以及其他选项。请注意，大多数国家/地区实施的法律要求您通知用户您正在存储有关他们的数据，征得他们的同意，并允许他们轻松擦除数据，即使数据仅存储在他们自己的浏览器中。

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 有关引导表和复选框筛选的问题

1条答案

相关问题

热门标签

最新问答