antd使用Transfer穿梭框(8)

已于 2022-05-01 15:49:46 修改
阅读量3k 收藏 2
点赞数
文章标签： javascript vue.js 前端
于 2022-05-01 15:40:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41969287/article/details/124526936
版权

Transfer

https://www.bookstack.cn/read/vue.ant.design-v1.3.8/e5baab041f53bdf6.md#%E5%B8%A6%E6%90%9C%E7%B4%A2%E6%A1%86

一、transfer组件

targetKeys使用v-model的话，无法实现穿梭

<template>
  <a-transfer
    :dataSource="mockData"
    showSearch
    :filterOption="filterOption"
    :targetKeys="targetKeys"
    @change="handleChange"
    @search="handleSearch"
    :render="item=>item.title"
  >
  </a-transfer>
</template>
<script>
export default {
  data () {
    return {
      mockData: [],
      targetKeys: [],
    }
  },
  mounted() {
    this.getMock()
  },
  methods: {
    getMock() {
      const targetKeys = [];
      const mockData = [];
      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };
        if (data.chosen) {
          targetKeys.push(data.key);
        }
        mockData.push(data);
      }
      this.mockData = mockData
      this.targetKeys = targetKeys
    },
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange(targetKeys, direction, moveKeys) {
      console.log(targetKeys, direction, moveKeys);
      this.targetKeys = targetKeys
    },
    handleSearch (dir, value) {
      console.log('search:', dir, value);
    },
  },
}
</script>

二、完整代码

<template>
  <div>
    <a-card :bordered="false">
      <div style="display: flex; flex-wrap: wrap">
        <head-info title="我的待办" content="8个任务" :bordered="true"/>
        <head-info title="本周任务平均处理时间" content="32分钟" :bordered="true"/>
        <head-info title="本周完成任务数" content="24个"/>
      </div>
    </a-card>
    <br />
    <a-form
        :model="formState"
        name="horizontal_login"
        layout="inline"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="任务id"
          name="task_id"
          :rules="[{ required: true, message: 'Please input your task_id!' }]"
      >
        <a-input v-model="formState.task_id" />
      </a-form-item>

      <a-form-item
          label="创建人"
          name="creator"
          :rules="[{ required: true, message: 'Please input your creator!' }]"
      >
        <a-select v-model="UserType" style="width:150px" allowClear>
          <a-select-option :value="item.id" v-for="(item, i) in UserArr" :key="i">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item>
        <a-button :style="{ marginLeft: '8px' }" @click="onSearchData">查询</a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="reset">重置</a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="showModal">+任务</a-button>
        <a-popconfirm
            title="task执行后不可修改，你确定要执行吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="confirm"
            @cancel="cancel"
        >
          <a-button :style="{ marginLeft: '8px' }" :disabled="!hasSelected"  @click="start">批量执行</a-button>
          <a-button :style="{ marginLeft: '8px' }" :disabled="!hasSelected"  @click="start">关联需求</a-button>
        </a-popconfirm>

      </a-form-item>
      <a-modal v-model="visible" width="500px" title="添加用例" @ok="handleOk">
        <p>Some contents...</p>
      </a-modal>
    </a-form>
    <a-table :columns="columns" :data-source="data" class="components-table-demo-nested" @change="onChanged" rowKey="id"
             :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
      <template slot="operation" slot-scope="record">
        <a-tooltip  title="详情" >
            <a-icon style="color: #0080ff;margin:0 4px" type="eye" @click="onDetail(record)" />
        </a-tooltip>
        <a-drawer :title="myTitle" :visible="isEnable" :mask=false @close="onClose"  width="520" :bodyStyle="{ marginBottom: '30px' }">
          <a-form :model="contents" :rules="rules" layout="vertical">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="任务ID" name="id">
                  <a-input v-model="contents.id" :disabled="disabled" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="任务名称" name="task_name">
                  <a-input v-model="contents.task_name" style="width: 100%" :disabled="disabled" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="关联需求" name="demand">
                  <a-input v-model="contents.demand" style="width: 100%" :disabled="disabled" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="状态" name="status">
                  <a-input v-model="contents.status" style="width: 100%" :disabled="disabled" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="创建人" name="creator">
                  <a-input v-model="contents.creator" style="width: 100%"  :disabled="disabled" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="创建时间" name="createdAt">
                  <a-input v-model="contents.createdAt" style="width: 100%" :disabled="disabled" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="更新时间" name="updatedAt">
                  <a-input v-model="contents.updatedAt" style="width: 100%" :disabled="disabled" />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="关联case数" name="bind_case">
                  <a-transfer
                      :dataSource="mockData"
                      showSearch
                      v-if="flag"
                      :filterOption="filterOption"
                      :targetKeys="targetKeys"
                      @change="handleChange"
                      @search="handleSearch"
                      :render="item=>item.title"
                  />
                  <a-input v-model="contents.bind_case"  v-if="!flag" style="width: 100%" :disabled="disabled" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>

          <template #extra>
            <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
            <a-button type="primary" @click="onClose">Submit</a-button>
          </template>
        </a-drawer>
        <a-tooltip  title="编辑" >
            <a-icon style="color: #0080ff;margin:0 4px" type="form" @click="onEdit(record)" />
        </a-tooltip>
        <!-- 运行 -->
        <a-tooltip title="运行">
          <a-icon type="play-circle" style="color: #0080ff;margin:0 4px"  @click="onRun(record)"/>
          <a-modal v-model="isshow" title="Task运行进度：" @ok="handleOk">
            <a-form
                :model="env"
                name="basic"
                autocomplete="off"
                @finish="onFinish"
                @finishFailed="onFinishFailed"
            >
              <a-form-item
                  label="运行环境"
                  name="env"
                  :rules="[{ required: true, message: 'Please input env!' }]"
              >
                <a-input v-model="env" />
              </a-form-item>
              </a-form>
          </a-modal>
        </a-tooltip>
        <a-tooltip  title="删除" >
          <a-popconfirm
              title="Are you sure delete this task?"
              ok-text="Yes"
              cancel-text="No"
              @confirm="confirm"
              @cancel="cancel"
          >
            <a-icon style="color: #0080ff;margin:0 4px" type="delete"  @click="onDelete(record)"/>
          </a-popconfirm>
        </a-tooltip>
      </template>

      <template #expandedRowRender>
        <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
          <template slot="operation" slot-scope="record">
            <a-tooltip  title="详情" >
              <a-icon style="color: #0080ff;margin:0 4px" type="eye" @click="onDetail(record)" />
            </a-tooltip>
            <a-tooltip  title="删除" >
              <a-popconfirm
                  title="Are you sure delete this case?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirm"
                  @cancel="cancel"
              >
                <a-icon style="color: #0080ff;margin:0 4px" type="delete"  @click="onDelete(record)"/>
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table>
      </template>
    </a-table>
  </div>
</template>

<script>

import HeadInfo from "@/components/tool/HeadInfo";
import { get_task_detail, get_case_list, get_task_list} from "@/services/build_history";
import {getUserList} from "@/services/postman";
import {message} from "ant-design-vue";


const columns = [
  { title: '任务ID', dataIndex: 'id', key: 'id' },
  { title: '任务名称', dataIndex: 'task_name', key: 'task_name' },
  { title: '关联case数', dataIndex: 'bind_case', key: 'bind_case',
    sorter: (a, b) => a.bind_case - b.bind_case,
    defaultSortOrder: 'descend',
    sortDirections: ['ascend', 'descend'] },
  { title: '关联需求', dataIndex: 'demand', key: 'demand'},
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '创建人', dataIndex: 'creator', key: 'creator' },
  { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt',
    sorter: (a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt),
    defaultSortOrder: 'descend',
    sortDirections: ['ascend', 'descend'] },
  { title: '更新时间', dataIndex: 'updatedAt', key: 'updatedAt',
    sorter: (a, b) => Date.parse(a.updatedAt) - Date.parse(b.updatedAt),
    defaultSortOrder: 'descend',
    sortDirections: ['ascend', 'descend'] },
  { title: '操作', key: 'operation',
    scopedSlots: { customRender: 'operation' }, //值跟dataIndex对应，支持操作列插槽
    width: 120,
  },
];

const rules = {
  id: [{ required: true, message: 'Please enter id' }],
  task_name: [{ required: true, message: 'please enter task_name' }],
  bind_case: [{ required: true, message: 'Please select bind_case' }],
  demand: [{ required: true, message: 'Please choose the demand' }],
  status: [{ required: true, message: 'Please choose the status' }],
  creator: [{ required: true, message: 'Please choose the creator', type: 'object' }],
  createdAt: [{ required: true, message: 'Please enter createdAt' }],
  updatedAt: [{ required: true, message: 'Please enter updatedAt' }],
};

const innerColumns = [
  {
    title : '用例名称',
    dataIndex: 'case_name',
    resizable: true,        //设置 resizable 开启拖动列
    width: 20,
  },
  {
    title : '优先级',
    dataIndex: 'priority',
    resizable: true,
    width: 20,
  },
  {
    title: '用例状态',
    dataIndex: 'status',
    resizable: true,
    width: 20,
  },
  {
    title: '创建人',
    dataIndex: 'creator',
    resizable: true,
    width: 20,
  },
  {
    title: '更新时间',
    dataIndex: 'update_time',
    resizable: true,
    width: 50,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    resizable: true,
    scopedSlots: { customRender: 'operation' }, //值跟dataIndex对应，支持操作列插槽
    width: 50,
  },
];


export default {
  name: "Task",
  data() {
    return {
      case_list: "http://localhost:7777/auth/case_list",
      task_list:"http://localhost:7777/auth/task_list",
      task_detail:"http://localhost:7777/auth/task_detail",
      data:[],
      columns,
      innerColumns,
      innerData:[],
      formState: {
        creator: '',
        task_id: '',
      },
      form: this.$form.createForm(this, {name: 'task'}),
      UserArr:[],
      UserType:'',
      visible:false,
      hasSelected:false,
      selectedRowKeys:[],
      contents:"",
      isEnable:false,
      myTitle:"Task详情页",
      disabled:false,
      flag:false,
      rules: rules,
      //Transfer
      mockData: [],
      targetKeys: [],
      isshow:false,
    }
  },
  components: {HeadInfo},
  methods: {
    onSearchData() {
      this.loading = true;
      const task_id = this.formState.task_id
      const creator = this.UserType
      console.log(task_id,creator);
      get_task_list(this.task_list, {task_id, creator})
          .then((result) => {
            this.loading = false;
            this.data = result.data.data;   //跟后端接口response对齐
          })
          .catch((err) => {
            this.data = err;
          });
    },
    onSelectChange(selectedRowKeys){
      this.selectedRowKeys = selectedRowKeys;
      if (this.selectedRowKeys.length > 0) {
        this.hasSelected = true
      }
    },
    onChanged(pagination, filters, sorter) {
      console.log('params', pagination, filters, sorter);
    },
    reset() {
      this.UserType = ''    //清空casename
      this.formState = []   //清空创建人
      this.data = []        //清空搜索结果
    },
    start(){
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    cancel(e) {
      console.log(e);
      message.error('Click on No');
    },
    confirm(e) {
      console.log(e);
      message.error('Click on Yes');
    },
    onFinish(val) {
      console.log('endValue', val);
    },
    onFinishFailed(val) {
      console.log('endValue', val);
    },
    showModal(){            //点击添加用例后展示弹窗
      this.visible = true;
    },
    handleOk(e){
      console.log(e);
      this.visible = false;
    },
    onEdit(record) {
      this.isEnable = true    //控制展示 Drawer抽屉
      this.disabled = false
      this.flag = true       //控制编辑页  展示Transfer 穿梭框
      this.myTitle = "更新Task"
      console.log('task edit:', this.flag);
      get_task_detail(this.task_detail, {record})
          .then((result) => {
            this.loading = false;
            this.contents = result.data.data;   //跟后端接口response对齐
            console.log('onedit ', this.contents);
          })
          .catch((err) => {
            this.contents = err;
          });
    },
    onDelete(e) {
      console.log(e);
    },
    onRun(record) {
      this.isEnable = false     //控制不展示 Drawer抽屉
      this.flag = false         //控制不展示 Transfer穿梭框
      this.isshow= true
      this.myTitle = "Task运行"
      console.log('task run:', record);  //TODO 调用后端运行接口
    },
    onDetail(record) {
      this.isEnable = true     //控制展示 Drawer抽屉
      this.disabled = true     //控制详情页输入框  不可编辑
      this.flag = false        //控制详情页       不展示Transfer穿梭框
      this.myTitle = "Task详情页"
      console.log('task detai:', this.flag);
      get_task_detail(this.task_detail, {record})
          .then((result) => {
            this.loading = false;
            this.contents = result.data.data;   //跟后端接口response对齐
            console.log('ondetail ', this.contents);
          })
          .catch((err) => {
            this.contents = err;
          });
    },
    onClose () {
      this.isEnable = false;
    },
    filterOption (inputValue, option) {
      return option.description.indexOf(inputValue) > -1;
    },
    handleChange (keys, direction, moveKeys) {
      console.log(keys, direction, moveKeys);
      this.targetKeys = keys
    },
    handleSearch (dir, value) {
      console.log('search:', dir, value);
    },
    getMock () {
      const keys = [];
      const mData = [];

      for (let i = 0; i < 20; i++) {
        const data = {
          key: i.toString(),
          title: `content${i + 1}`,
          description: `description of content${i + 1}`,
          chosen: Math.random() * 2 > 1,
        };

        if (data.chosen) {
          keys.push(data.key);
        }

        mData.push(data);
      }

      this.mockData = mData;
      this.targetKeys = keys;
    },
  },
  mounted() {
    this.getMock()     //TODO 改成后端获取真实数据
    const task_id = 1  //TODO 任务id
    getUserList().then(res => {
      this.UserArr = res.data.data         //跟后端接口response对齐
      console.log('搜索条件',this.UserArr);
    }),
    get_case_list(this.case_list,{task_id}).then(res => {
      this.loading = false;
      this.innerData = res.data.data         //跟后端接口response对齐
      if( this.innerData.length > 0) {
        console.log('res:--- ', this.innerData);
      }
    })
  },
}
</script>

<style scoped>

</style>

三、效果

详情页：
在这里插入图片描述
编辑页：
在这里插入图片描述
运行：
在这里插入图片描述

Xiaoshuang_Cao
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antd中在vue项目中自定义穿梭框
yangyanqin2545的博客
09-07 1680
1、完成代码
Ant-Design 中a-transfer穿梭框 组件的使用
PIKapikaaaa的博客
06-29 4503
Ant Design组件中穿梭框（Transfer）的详细使用。解释了每行代码，并赋予案例
react antd中transfer穿梭框组件中清除搜索框内容
sumengnan的博客
05-24 219
如图：需要清除search搜索框内容antd的transfer穿梭框组件未提供入口修改input框的值。
ant design vue ＜a-transfer＞简单穿梭框实现
a nice day
02-17 1365
简单穿梭框
vue+antDesign实现树形数据展示并表格父子级选中和取消联动；递归
Sunny_lxm的博客
10-24 5893
vue+antDesign实现树形数据展示并表格父子级选中和取消联动
AntD-tree组件使用详析
qq_45799465的博客
02-17 6961
一、selectedKeys与onSelect。 二、expandedKeys与onExpand。 三、loadedKeys与onLoad和onExpand。 四、loadData。 五、树节点局部节点刷新。 六、递归获取与修改数据
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
antd-bpmn-React框架资源
最新发布
07-01
一个基于 React + Ant.design + bpmn.js 编写的工作流高阶组件。
react+antd多页面框架
01-08
AntD包括表格、按钮、输入框、模态框等多种组件，并遵循蚂蚁金服的UI设计规范。 3. **模板HTML (template.html)**：在多页面应用中，template.html通常作为每个页面的基础结构，包含公共的头部和尾部元素。开发者...
antd 开发框架包
10-19
antd将UI分成不同的组件,每个组件都独立封装缺陷下面这些都没有:事件系统(除了原生的DOM事件)AJAX功能数据层Promises应用程序架构单单reactjs的代码压缩后也需要147k以上reactjs代码量最多,因为它既要管理UI逻辑,又...
antd浏览器直接使用.7z
04-06
标题 "antd浏览器直接使用.7z" 暗示了这个压缩包包含了可以在浏览器环境中直接使用的Ant Design（简称antd）库资源，它是一个基于Vue.js的前端组件库，旨在提供高质量且易于使用的UI解决方案。Ant Design是阿里巴巴...
ant design for vue表格、穿梭框默认全选
weixin_59598992的博客
08-23 1557
ant design for vue表格全选，解决全选后无法更改选择的问题
antd中Tree组件使用方法个人笔记
BHSZZY的博客
01-12 2470
最近在自己自学前端，不清楚学习路线，只能盯着公司的前端项目硬看。公司的前端项目是react框架，Ant Design Pro。之前刚把的逻辑理顺，目前准备开发个简单的前端页面。在此总结下antd中组件的使用方法。
react+ts实现树形穿梭组件
m0_59855881的博客
05-15 1274
import React, { useEffect, useState } from "react"; import { Tree, Divider, Steps, Input, Button, Modal, Layout } from "antd"; import { CloseOutlined } from "@ant-design/icons"; import "./base.less"; const { Search } = Input; const { Step } = Steps;...
前端react+Ant Design 给穿梭框Transfer 添加导入导出按钮，难点在于导入数据后怎么赋值给右侧
m0_72154126的博客
06-04 843
react+Ant Design 给穿梭框Transfer
Antd的Transfer树穿梭框(支持搜索和全选)
开发笔记
02-09 2221
antd二级树穿梭框，支持搜索，支持全选
使用antd中Transfer穿梭框实现小组成员的增删
m0_61470782的博客
05-13 495
首先要对得到的数据进行处理，使得mockData中的数据为未分组的学生和该小组下已有的学生，targetKeys为mockData中已分组学生的key，从而保证穿梭框中显示的结果为左边为未分组的学生，右边为该该小组下的学生。穿梭框左边栏为未分组的学生，右边栏为该小组学生， 选择左边学生移进右边即为添加学生到该组，右边移入左边即为从组中删除学生（可以选择多个学生进行操作）点击提交时，根据direction的方向来得到是添加还是删除学生，然后调用对应的接口。数据源，其中的数据将会被渲染到左边一栏中，
AntDesign的穿梭框组件Transfer如何清空搜索框内容
weixin_49066399的博客
08-15 1491
AntDesign的穿梭框组件Transfer清空搜索框内容
react antd树穿梭框(下)
斌儿的博客
03-22 2080
相对上篇改动不大,实现选中追加,删除右边树结构 树结构穿梭框上篇 import React, { Component } from 'react'; import { Tree, Input, Button } from 'antd'; // import requset from '@/utils/request'; import { NuCard } from '@cbay/cbay-ui'; import { cloneDeep, set } from 'lodash'; const { Search
antd transfer tree基于树结构的穿梭框
05-25
antd transfer tree 是一个基于树结构的穿梭框组件，它可以让用户在两个树形结构之间进行拖拽式的选择操作，同时还支持搜索、展开、收起等功能，非常适合用于需要选择大量数据的场景。 在使用时，首先需要通过 dataSource 属性传入树形数据源，然后通过 render 函数来自定义每个节点的展示方式。同时，还可以通过 showSearch、searchPlaceholder、treeDefaultExpandAll 等属性来控制搜索、默认展开等行为。 下面是一个简单示例： ``` import { TransferTree } from 'antd'; const data = [ { title: 'node1', key: 'node1', children: [ { title: 'child1-1', key: 'child1-1', }, { title: 'child1-2', key: 'child1-2', }, ], }, { title: 'node2', key: 'node2', children: [ { title: 'child2-1', key: 'child2-1', }, { title: 'child2-2', key: 'child2-2', }, ], }, ]; function renderTreeNode(node) { return <span>{node.title}</span>; } function App() { return ( <TransferTree dataSource={data} render={renderTreeNode} showSearch searchPlaceholder="Search" treeDefaultExpandAll /> ); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值