iveiw:Switch开关用法

最新推荐文章于 2023-11-15 14:24:06 发布

牧马少女

最新推荐文章于 2023-11-15 14:24:06 发布

阅读量1k

点赞数

分类专栏： iView

本文链接：https://blog.csdn.net/qq_36069339/article/details/117745875

版权

iView 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、HTML

<Table border :columns="tableColumns" :data="tableData" :loading="tableLoading">
    <!-- 是否开启:0:启用，1:禁用 -->
    <template slot-scope="{ row, index }" slot="isStatus">
        <i-switch v-model="row.isStatus1" @on-change="handleChange(row)">
            <span :slot="0">开</span>
            <span :slot="1">关</span>
        </i-switch>
    </template>
</Table>

2、JS

export default {
    data() {
        return {
        	tableColumns:[
			   {
			        title: '序号',
			        type: 'index',
			        align: 'center',
			        width:"80"
			    },{
			        title: '状态',
			        key: 'isStatus',//是否开启:0:启用，1:禁用
			        align: 'center',
			        slot: 'isStatus'
			    }
			]
        }
    },
    methods: {
		getTableData(){
           dragonListApi.getRulesPage().then(res=>{
               if(res.code==0){
                   var resData = res.data.records;
                   resData.forEach((ele)=>{
                   	//接口返的状态是0--启用，1--禁用。Switch组建的v-modal值为bool，所以需要转一下。
                       ele.isStatus1 = ele.isStatus===0 ? true : false
                   })
                   this.tableData = resData
               }else{
                   this.$Message.error({
                       content: res.message,
                       duration: 1.5,
                       closable:true,
                   });
               }
           }).catch((error)=>{
               console.log(error)
               that.$Message.error({
                   content: error,
                   duration: 1.5,
                   closable:true,
               });
           })
       },
	}
}