vue3使用 ag-table 怎么让 column width 自适应及填满页面 <script setup lang="ts"><script/>形式写

使用 `<script setup>` 语法在 Vue3 中编写代码时，可以按照以下方式实现 ag-table 的列宽自适应和填满页面的效果：

<template>
  <div class="table-container">
    <ag-table :columnDefs="computedColumnDefs" :rowData="rowData"></ag-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';

const columnDefs = [
  // 列定义
  // ...
];
const rowData = [
  // 数据
  // ...
];

const windowWidth = ref(window.innerWidth);

const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

// 计算属性
const computedColumnDefs = computed(() => {
  const totalWidth = windowWidth.value; // 获取当前页面宽度
  const numColumns = columnDefs.length;
  const columnWidth = totalWidth / numColumns;

  return columnDefs.map((def) => {
    return {
      ...def,
      width: columnWidth, // 设置列宽度
    };
  });
});
</script>

<style scoped>
.table-container {
  width: 100%;
  display: flex;
}
</style>

这样就可以使用 `<script setup>` 的方式编写 Vue3 的代码，并实现 ag-table 的列宽自适应和填满页面的效果。希望对你有所帮助！