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组件中prop属性使用说明实例代码详解

    Vue组件中的prop属性用于向组件传递数据，是组件通信的一种方式。在使用prop属性时，需要在组件实例的props选项中声明传递的属性及其类型。本篇攻略将详细讲解Vue组件中prop属性的使用说明，并提供实例代码作为示例。 1. 声明prop属性 在Vue组件中使用prop属性需要在组件的props选项中声明传递的属性及其类型。例如下面的代码是声明一个名为…

    Vue 2023年5月27日
    00

  • vue Watch和Computed的使用总结

    我来为你详细讲解“vue Watch和Computed的使用总结”的完整攻略。 什么是vue Watch和Computed 在Vue.js开发中，数据的状态更新非常频繁，因此需要工具来监听并响应数据变化。Vue Watch和Computed都是解决Vue数据变化监听的两个方案。 Watch是一种对数据进行监听并做出相应的方案，当监听的数据发生变化时，会立即触…

    Vue 2023年5月27日
    00

  • Vue实现跑马灯简单效果

    下面是 Vue 实现跑马灯简单效果的攻略： 概述 跑马灯是常用于展示广告、公告等信息的效果。在 Vue 中实现跑马灯，可以使用 Vue 的内置指令 v-for 和过渡效果实现。 实现步骤 使用 v-for 指令循环渲染数据 使用 CSS3 的过渡效果实现轮播效果 使用 computed 计算属性进行数据循环 使用 setInterval() 方法实现自动轮播…

    Vue 2023年5月27日
    00

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

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

    Vue 2023年5月27日
    00

  • 梳理一下vue中的生命周期

    梳理Vue中的生命周期是了解Vue的重要组成部分之一，它可以帮助我们更好地理解Vue的工作原理以及响应式数据的流程。Vue的生命周期可以分为四个阶段： 创建阶段（Creation） 在创建阶段中，Vue组件实例会执行以下生命周期钩子函数： beforeCreate: 在实例创建之前，常用于初始化一些非响应式的数据。 created: 在实例创建之后，常用于获…

    Vue 2023年5月27日
    00

  • vue实现全选功能

    下面是详细讲解“Vue.js实现全选功能”的完整攻略，包含两条示例说明： 一、实现思路 要实现全选功能，需要以下几个步骤： 定义一个变量来存储当前是否为全选状态。 绑定checkbox的v-model，将每个checkbox的选中状态绑定到一个数组中。 使用计算属性，判断当前是否处于全选状态，然后绑定全选的checkbox的v-model，实现全选功能。 监…

    Vue 2023年5月29日
    00

  • 使用 Vue 实现一个虚拟列表的方法

    Vue 实现虚拟列表可以有效提高大数据量列表的性能，这里提供一个实现虚拟列表的方法： 步骤1：定义组件 首先定义一个列表组件，可以按照下面的代码块来实现： <template> <div class="list" ref="list"> <div v-for="(item, in…

    Vue 2023年5月28日
    00

  • vue编写的功能强大的swagger-ui页面及使用方式

    什么是Swagger-UI页面？ Swagger UI是一个通过注解的方式为 RESTful API 描述文档生成在线文档界面的工具。通过Swagger UI，我们可以详细地查看到API接口的信息，包括接口名称、接口描述、请求地址、请求方式、参数类型、参数描述、响应状态码等等。Swagger UI可以很方便地帮助我们对API接口进行测试与调试。 如何使用Vu…

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