左右列表框内容选择控件

$("#right").click(function(){
			$("#selectB option:selected").attr("selected",false);
			$("#selectA option:selected").appendTo("#selectB");
		});
		$("#left").click(function(){
			$("#selectA option:selected").attr("selected",false);
			$("#selectB option:selected").appendTo("#selectA");
		});
		$("#rightAll").click(function(){
			$("#selectA option").appendTo("#selectB");
		});
		$("#leftAll").click(function(){
			$("#selectB option").appendTo("#selectA");
		});
		$("#selectA").dblclick(function(){
			$("#selectB option:selected").attr("selected",false);
			$("#selectA option:selected").appendTo("#selectB");
		});
		$("#selectB").dblclick(function(){
			$("#selectA option:selected").attr("selected",false);
			$("#selectB option:selected").appendTo("#selectA");
		});


<table id="tableA" width="400" border="0">
      <tr>
        <td width="179" rowspan="2"><div align="right">
          <select name="select" multiple="multiple" id="selectA"  style="width:100px;height:160px">
            <option value="1" >选项1</option>
            <option value="2" >选项2</option>
            <option value="3" >选项3</option>
            <option value="4" >选项4</option>
            <option value="5" >选项5</option>
            <option value="6" >选项6</option>
            <option value="7" >选项7</option>
            <option value="8" >选项8</option>
          </select>
        </div>
		</td>
        <td width="14"><button id="rightAll" >&gt;|</button><button id="right" >&gt;&gt;</button></td>
		
        <td width="193" rowspan="2">
			<div align="left">
			  <select name="select2" multiple="multiple" id="selectB"  style="width:100px;height:160px">
		      </select>
	        </div></td>
      </tr>
      <tr>
        <td><button id="left" >&lt;&lt;</button><br /><button id="leftAll" >|&lt;</button></td>
      </tr>
      
    </table>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中可以使用Element Plus库中的Transfer(穿梭框)组件来实现树状穿梭框。以下是如何使用的步骤: 1. 安装Element Plus ``` npm install element-plus --save ``` 2. 在Vue项目中引入Element Plus 在main.js文件中添加以下代码: ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App).use(ElementPlus).mount('#app') ``` 3. 使用Transfer组件 在需要使用穿梭框的组件中,使用Transfer组件,并传入需要展示的数据: ```vue <template> <el-transfer v-model="value" :data="data" :props="props" filter-placeholder="请输入关键字" :titles="['源列表', '目的列表']"> </el-transfer> </template> <script> export default { data() { return { value: [], props: { label: 'label', children: 'children' }, data: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1' }, { label: '三级 1-1-2' } ] } ] }, { label: '一级 2', children: [ { label: '二级 2-1', children: [ { label: '三级 2-1-1' }, { label: '三级 2-1-2' } ] }, { label: '二级 2-2', children: [ { label: '三级 2-2-1' }, { label: '三级 2-2-2' } ] } ] } ] } } } </script> ``` 在上述代码中,data为需要展示的数据,props为数据中每个节点的label和children属性名,titles为穿梭框的左右标题。 4. 样式优化 如果需要对穿梭框的样式进行优化,可以在项目中引入自定义样式文件,并覆盖Element Plus默认样式。例如: ```css .el-transfer { width: 600px; margin: 20px auto; } .el-transfer__buttons { margin-top: 80px; } .el-transfer__buttons button { margin-top: 10px; margin-bottom: 10px; } ``` 以上代码将穿梭框的宽度设置为600px,并将按钮组件的上下间距调整为10px。 这样,就可以在Vue3项目中使用树状穿梭框插件啦!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值