Vue+Element switch組件的使用示例代碼詳解
代碼如下所示:
<el-table-column label="商品狀態" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.goods_state" class="switch" :active-value="1" :inactive-value="0" active-text="上架" inactive-text="下架" @change="change($event,row)" /> </template> </el-table-column>
參數說明:
width | switch 的寬度(像素) |
active-text | switch 打開時的文字描述 |
inactive-text | switch 關閉時的文字描述 |
active-value |
switch 打開時的值 |
inactive-value | switch 關閉時的值 |
active-color | switch 打開時的背景色 |
inactive-color | switch 關閉時的背景色 |
完整代碼:
<el-table-column label="商品狀態" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.goods_state" class="switch" :active-value="1" :inactive-value="0" @change="change($event,row)" /> </template> </el-table-column> <script> methods: { //狀態切換 change(data, row) { console.log(data); console.log(row); //此處可以請求後端接口更改商品狀態 }, } }; </script>
如何讓文字在按鈕中顯示如以下這樣
解決辦法:加入以下css樣式
/* switch按鈕樣式 */ .switch .el-switch__label { position: absolute; display: none; color: #fff !important; } /*打開時文字位置設置*/ .switch .el-switch__label--right { z-index: 1; } /* 調整打開時文字的顯示位子 */ .switch .el-switch__label--right span{ margin-right: 9px; } /*關閉時文字位置設置*/ .switch .el-switch__label--left { z-index: 1; } /* 調整關閉時文字的顯示位子 */ .switch .el-switch__label--left span{ margin-left: 9px; } /*顯示文字*/ .switch .el-switch__label.is-active { display: block; } /* 調整按鈕的寬度 */ .switch.el-switch .el-switch__core, .el-switch .el-switch__label { width: 60px !important; margin: 0; }
到此這篇關於Vue+Element switch組件的使用的文章就介紹到這瞭,更多相關Vue Element switch組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 關於el-table表格組件中插槽scope.row的使用方式
- vue實現表格分頁功能
- vue+element ui實現錨點定位
- Element UI中table單元格合並的解決過程
- vue中的slot-scope及scope.row用法