ant-design-vue transfer穿梭框效果代码

代码语言:html

所属分类:表单美化

代码描述:ant-design-vue transfer穿梭框效果代码

代码标签: 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>
<body>
    <div id="app">

        <div>
            <a-transfer
                :data-source="mockData"
                :titles="['Source', 'Target']"
                :target-keys="targetKeys"
                :selected-keys="selectedKeys"
                :render="item => item.title"
                :disabled="disabled"
                @change="handleChange"
                @selectChange="handleSelectChange"
                @scroll="handleScroll"
                />
            <a-switch
                un-checked-children="enabled"
                checked-children="disabled"
                :checked="disabled"
                style="margin-top: 16px"
                @change="handleDisable"
                />
        </div>


    </div>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/antd.1.7.4.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/moment-with-locales.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/antd.1.7.4.js"></script>

    <script>

        var vue = new Vue({
            el: '#app',
            data() {
                const mockData = [];
                for (let i = 0; i < 20; i++) {
                  .........完整代码请登录后点击上方下载按钮下载查看

网友评论0