Vue中的vxe-table教程16-下拉框、文字域的使用
阿新 • • 發佈：2021-02-08
技術標籤：vxe-table
注意點：
下載字型圖示，並匯入
使用圖示需引入圖示對應的css檔案即可使用
下載地址：http://www.fontawesome.com.cn/
匯入方法：
<link rel="stylesheet" href="./css/font-awesome.css">
效果圖：
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');