<template>
<div>
<el-form :model="setTablePointKey" label-width="auto" label-position="left">
<div>
<div style="font-weight: 700;color:#606266;">下拉数据</div>
<el-row :gutter="10" style="font-size:12px;font-weight: 700;color:#606266;">
<el-col :span="8" class="center">列值</el-col>
<el-col :span="8" class="center">列名</el-col>
<el-col :span="8" class="center">
<el-button type="primary" size="small" @click="addSetTablePointKey">新增</el-button>
</el-col>
</el-row>
<el-row :gutter="10" v-for="item,index in setTablePointKey.tablePointKeyList" :key="index" style="padding:4px 0;">
<el-col :span="8" class="center">
<el-select v-model="item.pointKey" placeholder="请选择" @click="handleClickSetTablePointKey('pointName',item.pointName)" @change="handleSelectSetTablePointKey(item.id,item.pointKey)">
<el-option
v-for="item in YKDropdownList"
:key="item.pointKey"
:label="item.pointKey"
:value="item.pointKey"
/>
</el-select>
</el-col>
<el-col :span="8" class="center">
<el-input size="small" v-model="item.pointName" @change="handleSetTablePointKey(item.id,'pointName',item.pointName,item)"/>
</el-col>
<el-col :span="8" class="center">
<el-button type="danger" size="small" @click="deleteSetTablePointKey(item)">删除</el-button>
</el-col>
</el-row>
</div>
</el-form>
</div>
</template>
<script setup>
const setTablePointKey = ref({
tablePointKeyList:[
{id:1,pointName:'都的读1', pointKey:'130_xnjd_YC_1_zkg'},
{id:2,pointName:'都的读2', pointKey:'130_xnjd_YC_1_zmxtqd'},
]
})
const YKDropdownList=ref([
{pointKey:'130_xnjd_YC_1_zkg',pointName:'都的读1'},
{pointKey:'130_xnjd_YC_1_zmxtqd',pointName:'都的读2'},
{pointKey:'130_xnjd_YC_1_kqysxtqd',pointName:'都的读13'},
])
const addSetTablePointKey = () => {
const maxId = Math.max(...setTablePointKey.value.tablePointKeyList.map(obj => obj.id));
setTablePointKey.value.tablePointKeyList.push({id:maxId=='-Infinity'?1:maxId+1, pointName:'新列', pointKey:'pointKey'},)
}
const deleteSetTablePointKey = (v) => {
console.log('deleteSetTablePointKey,',setTablePointKey.value,v);
setTablePointKey.value.tablePointKeyList = setTablePointKey.value.tablePointKeyList.filter(item => item.id !== v.id);
}
const handleClickSetTablePointKey = (label,value) => {
// console.log(label,value);
}
const handleSelectSetTablePointKey = (id,v) => {
const YKDropdownItem=YKDropdownList.value.find(item=>item.pointKey===v)
const tablePointKeyItem=setTablePointKey.value.tablePointKeyList.find(item=>item.id===id)
tablePointKeyItem.pointName=YKDropdownItem.pointName
}
</script>
下拉新增选项
最新推荐文章于 2024-10-15 14:00:48 发布
本文介绍了如何使用Vue.js构建一个动态表格,允许用户在列中选择或添加新的列值(pointKey)和名称(pointName),并支持删除已存在的列项。
摘要由CSDN通过智能技术生成