<script setup lang="ts">
import { ref, version as vueVersion } from 'vue'
const msg = ref('Hello World!')
const selected_table_items = ref([])
const name_options = [
{id: 1, label: 'Name 1', value: 'name1'},
{id: 2, label: 'Name 2', value: 'name2'},
{id: 3, label: 'Name 3', value: 'name3'},
{id: 4, label: 'Name 4', value: 'name4'},
{id: 5, label: 'Name 5', value: 'name5'},
{id: 6, label: 'Name 6', value: 'name6'},
{id: 7, label: 'Name 7', value: 'name7'},
{id: 8, label: 'Name 8', value: 'name8'},
{id: 9, label: 'Name 9', value: 'name9'},
{id: 10, label: 'Name 10', value: 'name10'},
]
const address_options = [
{id: 1, label: 'Address 1', value: 'Address1'},
{id: 2, label: 'Address 2', value: 'Address2'},
{id: 3, label: 'Address 3', value: 'Address3'},
{id: 4, label: 'Address 4', value: 'Address4'},
{id: 5, label: 'Address 5', value: 'Address5'},
{id: 6, label: 'Address 6', value: 'Address6'},
{id: 7, label: 'Address 7', value: 'Address7'},
{id: 8, label: 'Address 8', value: 'Address8'},
{id: 9, label: 'Address 9', value: 'Address9'},
{id: 10, label: 'Address 10', value: 'Address10'},
]
const handleSelectionChange = val => {
selected_table_items.value = val
}
const tableData = [
{
id: 1,
date: '2016-05-03',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 2,
date: '2016-05-02',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 3,
date: '2016-05-04',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 4,
date: '2016-05-01',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 5,
date: '2016-05-02',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 6,
date: '2016-05-04',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 7,
date: '2016-05-01',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 8,
date: '2016-05-02',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 9,
date: '2016-05-04',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 10,
date: '2016-05-01',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 11,
date: '2016-05-02',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 12,
date: '2016-05-04',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 13,
date: '2016-05-01',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 14,
date: '2016-05-02',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 15,
date: '2016-05-04',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 16,
date: '2016-05-01',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 17,
date: '2016-05-02',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 18,
date: '2016-05-04',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
{
id: 19,
date: '2016-05-01',
name: ['Tom'],
address: ['No. 189, Grove St, Los Angeles'],
},
]
</script>
<template>
<h1>{{ msg }}</h1>
<el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="40" />
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180">
<template #default="scope">
<span v-if="!selected_table_items.some(item => item.id === scope.row.id)">
{{ scope.row.name.join(', ') }}
</span>
<el-select
v-else
v-model="scope.row.name"
:key="scope.row.id"
multiple
collapse-tags
:max-collapse-tags="4"
:multiple-limit="50"
style="width: 100%"
>
<el-option
v-for="item in name_options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
<el-table-column prop="address" label="Address">
<template #default="scope">
<span v-if="!selected_table_items.some(item => item.id === scope.row.id)">
{{ scope.row.address.join(', ') }}
</span>
<el-select
v-else
v-model="scope.row.address"
:key="scope.row.id"
multiple
collapse-tags
:max-collapse-tags="4"
:multiple-limit="50"
style="width: 100%"
>
<el-option
v-for="item in address_options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</el-table-column>
</el-table>
</template>