el-table表格中嵌套下拉框

想退休的搬砖人

已于 2024-02-18 22:57:12 修改

阅读量1k

点赞数 7

文章标签： vue.js elementui javascript

于 2024-02-03 23:25:19 首次发布

本文链接：https://blog.csdn.net/2301_79568779/article/details/136018116

版权

本文介绍了如何在Vue应用中使用ElementPlus库创建包含多选和单选选项的表格，展示了数据绑定和动态操作（如删除行）的实现过程。

摘要由CSDN通过智能技术生成

下表为选项的内容，删除下表行，上表的下拉框选项减少

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData1.data"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    border
    size="small"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="value" label="Option" show-overflow-tooltip >
      <template #default="scope">
        <el-select
          v-model="scope.row.value"
          class="m-2"
          placeholder="Select"
          style="width: 240px"
        >
          <el-option
            v-for="item in tableData2.data"
            :key="item.value"
            :label="item.label"
            :value="item.id"
          />
        </el-select>
      </template>
    </el-table-column>
  </el-table>
  <el-table
    ref="singleTableRef"
    :data="tableData2.data"
    highlight-current-row
    style="width: 100%"
    @current-change="handleCurrentChange"
    size="small"
  >
    <el-table-column type="index" width="50" />
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column label="Operations" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="deleteFn(scope.row.id)">delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
const multipleTableRef = ref();
const multipleSelection = ref([]);
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}

let tableData1 = reactive({data:[
  {
    name: 'Tom1',
    value:''
  },
  {
    name: 'Tom2',
    value:''
  },
  {
    name: 'Tom3',
    value:''
  },
  {
    name: 'Tom4',
    value:''
  }
]});

let tableData2 =reactive( {data:[
  {
    id: '1',
    value: 'Option1',
    label: 'Option1',
    name: 'Option1'
  },
  {
    id: '2',
    value: 'Option2',
    label: 'Option2',
    name: 'Option2'
  },
  {
    id: '3',
    value: 'Option3',
    label: 'Option3',
    name: 'Option3'
  },
  {
    id: '4',
    value: 'Option4',
    label: 'Option4',
    name: 'Option4'
  },
]});

const handleSelectionChange = (val) => {
  console.log('val',val);
  multipleSelection.value = val;
  console.log('multipleSelection',multipleSelection.value);
}
const deleteFn=(id)=>{
  console.log('row',id);
  tableData2.data = tableData2.data.filter((item)=>{
    return item.id!=id;
  })
  console.log('tableData2', tableData2);
}
</script>
<style scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>