Vue中的vxe-table教程16-下拉框、文本域的使用

程序员文章站 2022-06-22 16:54:52

注意点：下载字体图标，并导入使用图标需引入图标对应的css文件即可使用下载地址：http://www.fontawesome.com.cn/导入方法：效果图：1. index.html中的代码

注意点：

下载字体图标，并导入

使用图标需引入图标对应的css文件即可使用

下载地址：http://www.fontawesome.com.cn/

导入方法：

效果图：

Vue中的vxe-table教程16-下拉框、文本域的使用

1. index.html中的代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
    <!--    使用图标需引入图标对应的css文件即可使用-->
    <!--    下载地址：http://www.fontawesome.com.cn/-->
    <link rel="stylesheet" href="./css/font-awesome.css">
    <!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
</head>

<body>
<div id="app">
    <template>
        <div style="padding: 0 50px 0 50px">
            <h3>文本域控制字符数</h3>
            <vxe-textarea placeholder="显示字符数文本域" maxlength="10" show-word-count></vxe-textarea>
            <h3>下拉框的用法</h3>
            <vxe-select v-model="value10" placeholder="默认尺寸">
                <vxe-option v-for="num in 15" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
            </vxe-select>
            <vxe-select v-model="value20" placeholder="请选择" prefix-icon="fa fa-user-o">
                <vxe-option v-for="num in 3" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
            </vxe-select>
            <br><br>
            <vxe-select v-model="value21" clearable placeholder="可清除" prefix-icon="fa fa-user-o">
                <vxe-option v-for="num in 3" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
            </vxe-select>
            <vxe-select v-model="value23" placeholder="分组" clearable transfer>
                <vxe-optgroup label="选项2">
                    <vxe-option value="2-1" label="选项2-1"></vxe-option>
                    <vxe-option value="2-2" label="选项2-2" disabled></vxe-option>
                    <vxe-option value="2-3" label="选项2-3"></vxe-option>
                </vxe-optgroup>
                <vxe-optgroup label="选项3" disabled>
                    <vxe-option value="3-1" label="选项3-1"></vxe-option>
                    <vxe-option value="3-2" label="选项3-2"></vxe-option>
                </vxe-optgroup>
                <vxe-optgroup label="选项4">
                    <vxe-option value="4-1" label="选项4-1"></vxe-option>
                    <vxe-option value="4-2" label="选项4-2"></vxe-option>
                </vxe-optgroup>
            </vxe-select>
            <br><br>
            <vxe-select v-model="value24" placeholder="多选可清除" multiple clearable>
            <vxe-option value="1" label="选项1"></vxe-option>
            <vxe-option value="2" label="选项2"></vxe-option>
            <vxe-option value="3" label="选项3"></vxe-option>
            <vxe-option value="4" label="选项4"></vxe-option>
            <vxe-option value="5" label="选项5"></vxe-option>
            <vxe-option value="6" label="选项6"></vxe-option>
          </vxe-select>
        </div>
    </template>
</div>
</body>

<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>

2. main.css中的代码

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

.vxe-textarea--inner {
    line-height: inherit;
}

3. main.js中的代码

var Main = {
    data() {
        return {
            value10: 12,
            value20: null,
            value21: null,
            value23: null,
            value24: null,
            tableData: [],
        }
    },
    methods: {

    },
};

var app = new Vue(Main).$mount('#app');

本文地址：https://blog.csdn.net/weixin_42289273/article/details/112567939

Vue中的vxe-table教程16-下拉框、文本域的使用

注意点：

效果图：

1. index.html中的代码

2. main.css中的代码

3. main.js中的代码

Vue中Quill富文本编辑器的使用教程

Vue中的vxe-table教程16-下拉框、文本域的使用

Vue中的vxe-table教程14-图标、按钮、单选框组、复选框组、开关按钮的使用

Vue中的vxe-table教程16-下拉框、文本域的使用

Vue中的vxe-table教程14-图标、按钮、单选框组、复选框组、开关按钮的使用