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

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

• Vue

下面是关于“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 diff算法全解析

    Vue Diff算法全解析 什么是diff算法 Diff算法是指计算两个版本之间差异的一种算法，常用于前端框架的虚拟DOM渲染优化中。在Vue中，Diff算法被应用于虚拟DOM的更新过程中，用于计算当前虚拟DOM与上一次渲染的虚拟DOM之间的差异，然后最小化DOM操作，从而提升性能。 diff算法的原理 （此部分内容较为抽象，建议读者阅读完整分析之后自行体验…

    Vue 2023年5月29日
    00

  • Vue验证码60秒倒计时功能简单实例代码

    那么我们来逐步讲解如何使用Vue实现验证码60秒倒计时功能的步骤和代码实现。 步骤一：安装Vue 首先，需要安装Vue，可通过以下命令安装： npm install vue 步骤二：创建Vue实例 在HTML页面中引入Vue库后，需创建Vue实例，用于管理页面数据和操作行为： const vueApp = new Vue({ el: ‘#app’, data…

    Vue 2023年5月29日
    00

  • vue3生命周期原理与生命周期函数简单应用实例分析 原创

    Vue3生命周期原理与生命周期函数简单应用实例分析 Vue3的生命周期和Vue2有些不同，但是原理和应用都是相似的。本文将从原理和应用两个方面分别讲解Vue3的生命周期。 原理 Vue3的生命周期可分为三个阶段：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmoun…

    Vue 2023年5月28日
    00

  • Vue封装–如何将数字转换成万

    下面是“Vue封装–如何将数字转换成万”的攻略： 一、问题描述 有时候我们需要将一些数据进行格式化，比如将一些较大的数字转换成“万”表示，以增强数据阅读的易读性。那么在Vue中，我们怎么封装一个可以将数字自动转换成“万”表示的方法呢？ 二、解决方案 在Vue中，我们可以通过封装一个公共组件的方式来实现此功能。具体实现方式如下： 1. 创建一个公共组件 在V…

    Vue 2023年5月27日
    00

  • vue计算属性时v-for处理数组时遇到的一个bug问题

    当使用 Vue.js 中计算属性时，我们可能会遇到一个问题，即在使用 v-for 渲染数组时，计算属性的计算结果会受到数组项顺序的影响，导致计算结果不正确。这个问题可以通过对计算属性进行优化来解决。 首先，我们可以看一下一个示例程序，它使用 v-for 和一个计算属性来渲染一个数组： <!– 在模板中使用 v-for 渲染一个数组，使用计算属性计算数…

    Vue 2023年5月29日
    00

  • vue-ajax小封装实例

    下面我将为您详细讲解”vue-ajax小封装实例”的完整攻略。 介绍 在Vue.js中，我们经常需要通过ajax向服务端请求数据或提交数据，而Vue.js并没有提供自带的ajax函数。因此，我们需要自己针对Vue.js进行封装ajax函数，以便能够在Vue.js中更好地使用ajax请求。 axios与vue-resource选择 目前，市面上流行的封装Aja…

    Vue 2023年5月28日
    00

  • elementUI+Springboot实现导出excel功能的全过程

    下面我将详细讲解如何使用ElementUI和Springboot实现导出excel功能的全过程。 第一步：搭建环境 1.1 安装Node.js和npm 在使用ElementUI之前，你需要先安装Node.js和npm。你可以在官网上下载Node.js的安装包，然后安装完成之后就可以通过npm来安装ElementUI依赖了。 1.2 导入ElementUI 你…

    Vue 2023年5月27日
    00

  • vue下axios拦截器token刷新机制的实例代码

    下面我将为您讲解“Vue下Axios拦截器Token刷新机制的实例代码”的完整攻略，包括以下几个方面： 什么是拦截器 在使用axios发起请求时，我们可以使用拦截器对请求进行拦截、修改，以及对响应进行拦截、统一处理等操作。而在vue项目中，我们常使用axios拦截器实现Token的自动刷新机制。 实现Token的自动刷新机制 具体实现步骤如下： (1) 在m…

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