Let's make the string(categoryV3) an array with ',' and create array length. and icon-add click add ..
but v-model not working.. and i don't know add .........
I am not good at speaking English.
Please give me your opinion.
<template>
<el-table
:data="tableData"
>
<el-table-column type="selection" width="55" align="center"> </el-table-column>
<el-table-column props="category" label="category" show-overflow-tooltip>
<template slot-scope="{row}">
<div v-for="(item, index) in generateArray(row.categoryV3)" :key="index">
<el-select class="filter-item select1" filterable v-model="item[index]" placeholder="-">
<el-option
v-for="item in options"
:key="item.value"
:label="`${item.value}. ${item.label}`"
:value="item.value"
/>
</el-select>
<span class="tmp-icon icon-add"><i class="el-icon-circle-plus-outline"></i></span>
<span class="tmp-icon icon-remove" v-show="generateArray(row.categoryV3).length > 1"
><i class="el-icon-remove-outline"></i
></span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
categoryV3:"option1,option2"
}, {
categoryV3:""
}],
options: [{
value: 'Option1',
label: 'Option1'
}, {
value: 'Option2',
label: 'Option2'
}]
};
},
methods: {
generateArray(val) {
return val.split(',');
},
}
};
</script>
data add 'categoryV3: []'
<div v-for="(item, index) in categoryV3[scope.$index]" :key="index">
<el-select class="filter-item select1" filterable v-model="categoryV3[scope.$index][index]" placeholder="-">
<el-option
v-for="item in relationCode"
:key="item.code_value"
:label="`${item.code_value}. ${item.code_name}`"
:value="item.code_value"
/>
</el-select>
<span class="tmp-icon icon-add" @click="addModel(categoryV3[scope.$index], '')"
><i class="el-icon-circle-plus-outline"></i
></span>
<span
class="tmp-icon icon-remove"
@click="removeModel(categoryV3[scope.$index], index)"
v-show="categoryV3[scope.$index].length > 1"
><i class="el-icon-remove-outline"></i
></span>
</div>