vue2 OpenTiny表格动态生成列

Vue 2 中的 OpenTiny 表格组件通常支持动态生成列，这是通过数据驱动的方式实现的。当你需要在运行时添加、删除或修改表头和列内容，可以利用 Vue 的响应式特性以及 OpenTiny 提供的API。

以下是大致步骤：

1. 定义数据模型：创建一个数组，每个元素代表一列，包含列标题和其它可能的数据属性。

data() {
  return {
    columns: [
      { title: '姓名', key: 'name' },
      { title: '年龄', key: 'age', width: 100 }
    ]
  };
},

2. 动态添加/修改列：当你需要动态增加新列或改变现有列时，在适当的地方更新`columns`数组。

addColumn() {
  this.columns.push({ title: '邮箱', key: 'email' });
},
removeColumn(index) {
  this.columns.splice(index, 1);
}

3. 绑定到表格组件：将`columns`数据绑定给 OpenTiny 表格的`columns`属性，它会自动渲染列标题和内容。

<open-tiny :columns="columns" .../>

相关问题

OpenTiny表格异步加载vue2

OpenTiny表格（也称为OpenTiny Grid）是一个基于Vue.js的轻量级表格组件库，它支持异步加载功能，适用于数据量大、需要分页显示的情况。在 Vue 2 中，你可以通过以下步骤实现表格的异步加载：

1. 安装依赖：首先安装`vue-tables-2`或`OpenTiny Grid`组件到你的项目中，可以使用 npm 或者 yarn 进行安装。

   npm install vue-tables-2 --save
   # 或者
   npm install opentiny-grid --save

2. 设置组件：在 Vue 组件中引入并配置表格组件。比如使用 `vue-tables-2`:

   <template>
     <vuetable :data="asyncData" />
   </template>

   <script>
   import Vuetable from 'vue-tables-2';

   export default {
     components: { Vuetable },
     data() {
       return {
         asyncData: [], // 异步获取的数据源
         pagination: {}, // 分页信息
       };
     },
     methods: {
       fetchData(page) {
         // 这里编写异步请求，当用户翻页时，发送请求获取新的数据
         axios.get('/api/data?page=' + page)
           .then(response => {
             this.pagination.current_page = page;
             this.asyncData = response.data; // 更新数据
           })
           .catch(error => {
             console.error('Error fetching data:', error);
           });
       }
     },
     mounted() {
       // 初始化加载第一页数据
       this.fetchData(1);
     },
   };
   </script>

3. 控制分页：你可以添加按钮或事件监听器来触发数据加载，比如导航栏上的“下一页”、“上一页”按钮，或者使用 `@current-page-change` 事件处理程序响应用户手动切换页面。