関数とCSS部分は以下のとおりです。
<script lang="ts">
「ant-design-vue」から { TableColumnsType } をインポートします
"vue" から { ref, reactive } をインポートします。
let isHidden = ref<boolean>(false);
// columns は列に関する設定項目なので、ドラッグする必要がある列に resizable: true を追加します
//知らせ！resizable: true 属性を持つ列は幅を定義する必要があります。これは後で列の幅を計算するのに便利です。 resizable: true が書かれていない場合、幅を定義する必要はありません。そうしないと、列をドラッグ アンド ドロップするとテーブル全体の幅が広くなります。
const columns = ref<TableColumnsType>([
{ タイトル: 'id'、dataIndex: 'id'、キー: 'id'、幅: 80、サイズ変更可能: true、minWidth: 80},
{ タイトル: '名前', dataIndex: '名前', キー: '名前', 省略記号: true, サイズ変更可能: true, minWidth: 100 ,width: 150 },
{ タイトル: 's'、dataIndex: 's'、キー: 's'、省略記号: true、サイズ変更可能: true、幅: 150},
{ タイトル: 'v'、dataIndex: 'v'、キー: 'v'、省略記号: true },
{ タイトル: 't'、dataIndex: 't'、キー: 't'、省略記号: true },
{ タイトル: 'e', dataIndex: 'e', key: 'e' },
]);
// リスト内のデータ
const getList = リアクティブ([
{id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},
{id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},
{id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},
{id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true},
{id:'1',name:'name',s:'s',v:'0.1',t:'2023',e:true}
])
//列のドラッグ＆ドロップを実装する関数
const handleResizeColumn = (w: 数値、col: 任意) => {
if (列) {
列幅 = w;
}
var width = 数値(columns.value[0].width) + 数値(columns.value[1].width) + 数値(columns.value[2].width)
if (width>550) { //ドラッグした3列の幅が一定値を超えると、超えた部分は非表示になります
columns.value[5].ellipsis = true
isHidden.value = true
} それ以外 {
columns.value[5].ellipsis = false
isHidden.value = false
}
}
エクスポートのデフォルト ({
設定（） {
getList
戻る {
getList、
隠されています、
列、
handleResizeColumn
};
}、
});
</script>
<stylescopedlang="scss">
.table_hidden {
オーバーフロー: 非表示;
}
</スタイル>
html部分は以下の通りです。
<テンプレート>
<div :class="isHidden ? 'table_hidden' : ' '" style="width: 900px; margin-left: 25%;">
<!-- isHidden が true の場合、div に table_hidden のスタイルを追加します。つまり、ドラッグで移動するテーブルの部分が非表示になるように、余分な部分が非表示になります -->
<!--直接非表示にできない特別な要件がまだいくつかあるため、この div に非表示属性を直接追加することもできます。幅が特定の値より大きい場合にのみ非表示にできます -- >
<a-table :columns="columns" :data-source="getList" class="list_body"
style="width:100%" @resizeColumn="handleResizeColumn">
</a-テーブル>
<!-- @resizeColumn="handleResizeColumn" 列のドラッグメソッドを設定します。 handleResizeColumn はドラッグ時に呼び出される関数です -->
</div>
</テンプレート>