1. Python技术站首页
  2. 其他
  3. Vue

vue+elementUI配置表格的列显示与隐藏

• Vue
yizhihongxing

下面是关于“vue+elementUI配置表格的列显示与隐藏”的完整攻略。

步骤一：安装必要的依赖

首先，需要安装element-ui和vue-resize组件依赖，可以使用npm安装，具体命令如下：

npm install element-ui vue-resize --save

其中，element-ui用于构建表格组件，vue-resize用于监听窗口变化以便及时进行表格列的自适应调整。

步骤二：初始化表格

在Vue组件中，先引入所需的依赖和表格需要的数据，然后初始化表格，示例代码如下：

<template>
  <div>
    <el-table
      ref="table"
      :data="tableData"
      v-resize="resizeTable"
      resizable
      :column-width-draggable="true"
      :default-sort="{prop: 'date', order: 'descending'}"
      :highlight-current-row="true">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
      <el-table-column
        :key="'action'"
        label="Action"
        width="150"
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { ResizeObserver } from 'vue-resize'
import { Table } from 'element-ui'

export default {
  name: 'MyTable',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518 N. Point, USA'
        },
        {
          date: '2016-05-04',
          name: 'Tony Green',
          address: 'No.1688 W. Point, USA'
        },
        {
          date: '2016-05-01',
          name: 'Ann Brown',
          address: 'No.9818 E. Point, USA'
        },
        {
          date: '2016-05-03',
          name: 'Gina Black',
          address: 'No.2822 S. Point, USA'
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('Edit clicked', row)
    },
    handleDelete(row) {
      console.log('Delete clicked', row)
    },
    getTableColumns() {
      return this.$refs.table.columns
    },
    resizeTable() {
      const dynamicColumns = this.getTableColumns().filter(column => !column.isColumnHidden)
      const fixedColumns = this.getTableColumns().filter(column => column.isColumnHidden)
      this.$nextTick(() => {
        dynamicColumns.forEach(({ $el }) => {
          const { clientWidth } = $el
          fixedColumns.forEach(({ columnKey, $el }) => {
            const $fixedColumn = $el.querySelector(`.cell.${columnKey}`)
            $fixedColumn.style.width = `${clientWidth}px`
          })
        })
      })
    }
  },
  mounted() {
    this.resizeTable()
  },
  components: {
    ResizeObserver,
    ElTable: Table
  }
}
</script>

上面的示例代码中，我们使用了element-ui提供的el-table和el-table-column组件实现一个简单的表格，并提供了编辑和删除操作按钮。此示例中表格为静态数据，后续我们将添加动态数据及列的隐藏功能。

其中重要的一点是，在el-table组件中我们使用了v-resize指令，并引入vue-resize组件作为支持该指令的必要依赖。v-resize指令会在窗口大小发生变化时自动调用resizeTable方法，做到实时自适应表格列的宽度。

步骤三：添加列隐藏功能

接下来，我们将添加一个按钮，通过点击按钮来显示或隐藏指定列，示例代码如下：

<template>
  <div>
    <button type="button" @click="toggleColumns">Toggle columns visibility</button>
    <el-table
      ref="table"
      :data="tableData"
      v-resize="resizeTable"
      resizable
      :column-width-draggable="true"
      :default-sort="{prop: 'date', order: 'descending'}"
      :highlight-current-row="true">
      <el-table-column
        prop="date"
        ref="dateColumn"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        ref="nameColumn"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        ref="addressColumn"
        label="Address">
      </el-table-column>
      <el-table-column
        :key="'action'"
        label="Action"
        width="150"
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { ResizeObserver } from 'vue-resize'
import { Table } from 'element-ui'

export default {
  name: 'MyTable',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518 N. Point, USA'
        },
        {
          date: '2016-05-04',
          name: 'Tony Green',
          address: 'No.1688 W. Point, USA'
        },
        {
          date: '2016-05-01',
          name: 'Ann Brown',
          address: 'No.9818 E. Point, USA'
        },
        {
          date: '2016-05-03',
          name: 'Gina Black',
          address: 'No.2822 S. Point, USA'
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      console.log('Edit clicked', row)
    },
    handleDelete(row) {
      console.log('Delete clicked', row)
    },
    getTableColumns() {
      return this.$refs.table.columns
    },
    toggleColumns() {
      const columnsToToggle = [this.$refs.nameColumn, this.$refs.addressColumn]
      columnsToToggle.forEach(column => {
        column.visible = !column.visible
        column.isColumnHidden = !column.visible
      })
      this.resizeTable()
    },
    resizeTable() {
      const dynamicColumns = this.getTableColumns().filter(column => !column.isColumnHidden)
      const fixedColumns = this.getTableColumns().filter(column => column.isColumnHidden)
      this.$nextTick(() => {
        dynamicColumns.forEach(({ $el }) => {
          const { clientWidth } = $el
          fixedColumns.forEach(({ columnKey, $el }) => {
            const $fixedColumn = $el.querySelector(`.cell.${columnKey}`)
            $fixedColumn.style.width = `${clientWidth}px`
          })
        })
      })
    }
  },
  mounted() {
    this.resizeTable()
  },
  components: {
    ResizeObserver,
    ElTable: Table
  }
}
</script>

在上面的示例代码中，我们添加了一个名为toggleColumns的方法，该方法会在点击按钮时调用。该方法会通过this.$refs获取需要隐藏的列对象，然后将列的visible属性取反，表现为显示或隐藏列。通过设置isColumnHidden属性来判断当前列是否应该隐藏，并调用resizeTable方法重新计算表格列的宽度。

示例一：支持动态数据

上述示例中我们提供了一个静态的数组tableData，在Vue实际应用中，我们通常需要根据后台返回的数据来动态渲染表格，下面给出一个简单的示例如下：

<template>
  <div>
    <button type="button" @click="toggleColumns">Toggle columns visibility</button>
    <el-table
      ref="table"
      :data="tableData"
      v-resize="resizeTable"
      resizable
      :column-width-draggable="true"
      :default-sort="{prop: 'date', order: 'descending'}"
      :highlight-current-row="true">
      <el-table-column
        prop="id"
        ref="idColumn"
        label="ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        ref="nameColumn"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        ref="addressColumn"
        label="Address">
      </el-table-column>
      <el-table-column
        :key="'action'"
        label="Action"
        width="150"
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { ResizeObserver } from 'vue-resize'
import { Table } from 'element-ui'
import api from '@/api';

export default {
  name: 'MyTable',
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    handleEdit(row) {
      console.log('Edit clicked', row)
    },
    handleDelete(row) {
      console.log('Delete clicked', row)
    },
    getTableColumns() {
      return this.$refs.table.columns
    },
    async fetchTableData() {
      const data = await api.getTableData()
      this.tableData = data
    },
    toggleColumns() {
      const columnsToToggle = [this.$refs.nameColumn, this.$refs.addressColumn]
      columnsToToggle.forEach(column => {
        column.visible = !column.visible
        column.isColumnHidden = !column.visible
      })
      this.resizeTable()
    },
    resizeTable() {
      const dynamicColumns = this.getTableColumns().filter(column => !column.isColumnHidden)
      const fixedColumns = this.getTableColumns().filter(column => column.isColumnHidden)
      this.$nextTick(() => {
        dynamicColumns.forEach(({ $el }) => {
          const { clientWidth } = $el
          fixedColumns.forEach(({ columnKey, $el }) => {
            const $fixedColumn = $el.querySelector(`.cell.${columnKey}`)
            $fixedColumn.style.width = `${clientWidth}px`
          })
        })
      })
    }
  },
  mounted() {
    this.fetchTableData()
    this.resizeTable()
  },
  components: {
    ResizeObserver,
    ElTable: Table
  }
}
</script>

在上面这个示例中，我们引入了一个名为api的接口模块，用于获取表格数据。在fetchTableData方法中，我们通过await和api.getTableData()获取后台数据，并将其保存至tableData中。这个过程中，需要注意的一点是，要在获取到数据之后再调用resizeTable方法，否则可能导致错误或计算不准确。

示例二：支持多个表格

上述示例中我们只提供了单个表格的示例，如果需要支持多个表格，并对每个表格都实现列的显示与隐藏功能，可以将示例代码封装为可重用的Vue组件。下面给出一个类似的封装示例：

<!-- MyDynamicTable.vue -->
<template>
  <div>
    <button type="button" @click="toggleColumns">Toggle columns visibility</button>
    <el-table
      ref="table"
      :data="tableData"
      v-resize="resizeTable"
      resizable
      :column-width-draggable="true"
      :default-sort="{prop: 'date', order: 'descending'}"
      :highlight-current-row="true">
      <el-table-column
        prop="id"
        ref="idColumn"
        label="ID"
        width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        ref="nameColumn"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        ref="addressColumn"
        label="Address">
      </el-table-column>
      <el-table-column
        :key="'action'"
        label="Action"
        width="150"
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">Edit</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { ResizeObserver } from 'vue-resize'
import { Table } from 'element-ui'
import api from '@/api';

export default {
  name: 'MyDynamicTable',
  props: ['apiEndpoint'],
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    handleEdit(row) {
      console.log('Edit clicked', row)
    },
    handleDelete(row) {
      console.log('Delete clicked', row)
    },
    getTableColumns() {
      return this.$refs.table.columns
    },
    async fetchTableData() {
      const data = await api.getTableData(this.apiEndpoint)
      this.tableData = data
    },
    toggleColumns() {
      const columnsToToggle = [this.$refs.nameColumn, this.$refs.addressColumn]
      columnsToToggle.forEach(column => {
        column.visible = !column.visible
        column.isColumnHidden = !column.visible
      })
      this.resizeTable()
    },
    resizeTable() {
      const dynamicColumns = this.getTableColumns().filter(column => !column.isColumnHidden)
      const fixedColumns = this.getTableColumns().filter(column => column.isColumnHidden)
      this.$nextTick(() => {
        dynamicColumns.forEach(({ $el }) => {
          const { clientWidth } = $el
          fixedColumns.forEach(({ columnKey, $el }) => {
            const $fixedColumn = $el.querySelector(`.cell.${columnKey}`)
            $fixedColumn.style.width = `${clientWidth}px`
          })
        })
      })
    }
  },
  mounted() {
    this.fetchTableData()
    this.resizeTable()
  },
  components: {
    ResizeObserver,
    ElTable: Table
  }
}
</script>

以上代码中，我们将封装后的表格组件命名为MyDynamicTable，并通过props中的apiEndpoint属性接收一个用于获取数据的API地址。如此封装之后，我们只需按如下方式在父组件中使用即可使用多个表格：

<!-- MyPage.vue -->
<template>
  <div>
    <my-dynamic-table api-endpoint="/api/table1" />
    <my-dynamic-table api-endpoint="/api/table2" />
    <my-dynamic-table api-endpoint="/api/table3" />
  </div>
</template>

<script>
import MyDynamicTable from '@/components/MyDynamicTable'

export default {
  name: 'MyPage',
  components: {
    MyDynamicTable
  }
}
</script>

以上就是“vue+elementUI配置表格的列显示与隐藏”的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue+elementUI配置表格的列显示与隐藏 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 基于Vue-cli的一套代码支持多个项目

    使用Vue-cli可以快速搭建Vue项目，但默认情况下每个项目都有单独的配置文件和依赖项，不利于维护和迭代。为了解决这个问题，我们可以使用一套代码来支持多个项目，具体步骤如下： 创建一个公共Vue项目 首先，我们需要创建一个公共的Vue项目，用于存放所有项目都需要共享的组件、样式和功能。可以使用Vue-cli创建一个通用的项目： # 全局安装Vue-cli …

    Vue 2023年5月28日
    00

  • Vue2.x与Vue3.x中路由钩子的区别详解

    来详细讲解“Vue2.x与Vue3.x中路由钩子的区别详解”。 Vue2.x与Vue3.x中路由钩子的区别详解 路由钩子的概念 在Vue中，路由是一个非常重要的概念，它用来管理应用程序中的导航。路由钩子则是在路由发生改变的时候，触发的一些函数，用于控制路由跳转的行为以及实现一些特殊的业务逻辑。 Vue2.x中路由钩子 在Vue2.x中，路由钩子分为三种类型：…

    Vue 2023年5月28日
    00

  • Vue.Draggable实现交换位置

    需要实现拖拽排序的网页功能时，可以选用Vue.Draggable这个js库来实现。技术栈需要熟悉Vue框架及基本的HTML和CSS。 以下是实现Vue.Draggable交换位置的步骤： 1.引入 Vue.Draggable 库：使用 npm 直接进行安装，通过 import 引入库即可。或者直接引入js文件。 //页面引入 Vue.Draggable JS…

    Vue 2023年5月29日
    00

  • vue 内置过滤器的使用总结(附加自定义过滤器)

    下面是详细讲解“vue 内置过滤器的使用总结(附加自定义过滤器)”的完整攻略，过程中将给出两个示例来说明。 1. vue 内置过滤器 Vue 提供了一些内置的过滤器，用于快速展示数据的不同格式。这些过滤器可以在插值表达式和 v-bind 指令中使用。 1.1 文本格式化 {{message | capitalize}}: 将信息的第一个字母大写。 {{mes…

    Vue 2023年5月27日
    00

  • Vue实例中生命周期created和mounted的区别详解

    当我们在Vue中创建一个实例时，它会先到生命周期中的created函数，然后再到mounted函数。这两个生命周期函数对于我们开发Vue应用程序非常重要，因为它们可以帮助我们在特定的时间点注入特定的代码。 1. created生命周期函数 created生命周期函数是在Vue实例中最早执行的函数，它在实例被创建之后立即调用。在这个时候，Vue实例上的属性和方…

    Vue 2023年5月28日
    00

  • 微信小程序wepy框架笔记小结

    微信小程序wepy框架笔记小结 什么是wepy框架 wepy是一个类Vue框架的微信小程序框架，它封装了很多常见的操作，方便我们快速开发小程序，同时还支持组件化开发。 wepy框架的优点 代码结构清晰明了，易于维护 支持组件化开发，方便复用 支持ES6/7标准语法，提高开发效率 自带脚手架，快速初始化项目 wepy框架的基本使用 安装wepy npm ins…

    Vue 2023年5月27日
    00

  • Vue计算属性与监视(侦听)属性的使用深度学习

    下面是关于Vue计算属性和监视属性的使用深度学习的完整攻略： 什么是Vue计算属性和监视属性 在Vue中，我们可以使用计算属性和监视属性来处理数据和响应数据的变化。 计算属性：通常用来根据已有的数据计算出新的数据。可以缓存计算结果，避免重复计算的开销。在数据变化时，它会自动更新计算结果，也可以手动调用它来更新计算结果。 监视属性：用来监听某个数据的变化，当指…

    Vue 2023年5月28日
    00

  • 基于Vue.js实现数字拼图游戏

    以下是“基于Vue.js实现数字拼图游戏”的完整攻略。 1. 准备工作 在开始编写数字拼图游戏之前，我们需要安装Vue.js和一些相关的依赖。可以使用以下命令进行安装： npm install -g vue-cli vue init webpack my-project cd my-project npm install 2. 组件开发 接下来我们需要编写数…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部