Element Plus 双表格联动

最新推荐文章于 2025-05-11 15:34:16 发布

原创最新推荐文章于 2025-05-11 15:34:16 发布 · 585 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

简介:在工作过程中写了一个组件，基于Element Plus 的双表格联动。总体构成相对来说较为简单，记录一下开发过程，原本组件基于若依框架，本文只基于Element Plus。内容相对来说较为基础，就是data内容的添加。

可实现功能：双表格联动，表格b的内容跟随表格a的选择而变动。

页面展示：

设计思路：

整体框架是两个卡片，两个卡片中各有一个表格，一个用于显示原有数据，一个用于显示添加数据。

模板部分：

模板部分主要是两个卡片的设计部分

<template>
  <div class="card-container">
    <el-card class="card-a">
      <el-form :inline="true">
        <el-form-item style="width: 100%;margin-top: 10px">
          <el-table :data="projectList" >
            <el-table-column label="项目名称" prop="name"/>
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
            <input type="checkbox">
          </el-table>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="card-b">
      <el-table max-height="500" :data="selectProjectList">
        <el-table-column label="已关联项目" prop="name"/>
      </el-table>
    </el-card>
  </div>
</template>

Js部分：

js部分主要就是选择时的执行逻辑，主要就是selectable方法部分。

<script setup>
const projectList = ref([
  // 初始化十个选择项
  { name: '项目1', selected: false },
  { name: '项目2', selected: false },
  { name: '项目3', selected: false },
  { name: '项目4', selected: false },
  { name: '项目5', selected: false },
  { name: '项目6', selected: false },
  { name: '项目7', selected: false },
  { name: '项目8', selected: false },
  { name: '项目9', selected: false },
  { name: '项目10', selected: false }
]);

const selectProjectList = ref([]);

function selectable(row) {
  selectProjectList.value = row;
}

</script>

style部分：

<style scoped lang="scss">
.card-container {
  width: 100%;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 在主轴上均匀分布空间 */
  gap: 20px; /* 两个卡片之间的间距 */
}

.card-a {
  flex: 8;
}

.card-b {
  flex: 4;
}
</style>