下拉新增选项

最新推荐文章于 2024-05-28 16:10:19 发布

bluejad

最新推荐文章于 2024-05-28 16:10:19 发布

阅读量85

点赞数 1

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/bluejad/article/details/138499091

版权

<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>