1、el-table 数据展示
(1)第一种
<el-table-column label="状态" width="180px" align="center">
<template slot-scope="scope">
<span v-if="scope.row.userState==0" >正常</span>
<span v-if="scope.row.userState==1" style="color: red">冻结</span>
<span v-if="scope.row.userState==2" style="color: green">异常</span>
</template>
</el-table-column>
(2)第二种
<el-table-column label="支付状态" :formatter="state" width="80px" align="center">
</el-table-column>
state(row, column) {
if (row.state === 0) {
return '未支付'
} else if (row.state === 1) {
return '已支付'
}
},
2、控制el-table大小显示
<el-table
v-loading="listLoading"
:data="list"
element-loading-text="载入中"
border
fit
stripe
highlight-current-row
:height="tableHeight" //控制高度
width="100%"
>
</el-table>
tableHeight: null,
mounted:function(){
this.listLoading = false
this.tableHeight = window.innerHeight - 300
},
3、确认弹框
<el-card class="box-card" style="margin-bottom: 20px;height: 80px">
<el-form ref="ruleForm" :model="info" :rules="rules" label-position="right" label-width="20px" style="width: 100%; margin-left:0px; height: 30px">
<el-row>
<el-form-item label="" prop="userId">
<el-input style="width: 30%" v-model="info.userId" placeholder="批量删除"/>
<el-button style="width: 100px" type="primary" @click="submitForm('ruleForm')">
删除
</el-button>
</el-form-item>
</el-row>
</el-form>
</el-card>
methods: {
onJsonChange(value) {
console.log('value:', value)
},
frozenUsers() {
this.$confirm('确定要删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var url = this.HOST + '/xx/xxx'
var qs = require('qs');
this.$axios.post(url, qs.stringify(this.info), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
.then(res => {
if (res.data.needReLogin === 1) {
this.$store.dispatch('LogOut').then(() => {
location.reload()
})
}
if (res.data.state==true){
this.$notify({
title: '成功',
message: res.msg,
type: 'success',
duration: 2000
})
}else {
this.$notify.error({
title: '失败',
message: res.msg,
duration: 2000
})
}
})
.catch(error => {
console.log(error)
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
},
submitForm(formName) {
this.$refs[formName].validate((valid) => { //开启校验
if (valid) { // 如果校验通过,请求接口,允许提交表单
this.frozenUsers()
} else { //校验不通过
return false;
}
});
}
}