iView UI库解决基于vue.js解决table中this的指向问题
this指向全局变量data的数据
html
<i-table ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns"
:data="tableData" @on-delete="handleDelete" :loading="loading">
</i-table>
<Modal v-model="is_apply" width="520">
<p slot="header">
<span class="ant-modal-title" id="rcDialogTitle0">报名人信息审核</span>
</p>
<div style="text-align:center">
<div class="ant-modal-body">
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;">
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">姓名：</div>
<div class="ant-col-14">{{model_show.name}}</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;">
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">联系方式：
</div>
<div class="ant-col-14">{{model_show.telphone}}</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"
v-if='model_show.extends!=null'>
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">性别：</div>
<div class="ant-col-14">{{model_show.extends.sex==3?'男':model_show.extends.sex==2?'女':'未知'}}
</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;">
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">所属公司：
</div>
<div class="ant-col-14">{{model_show.company}}</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;">
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">所属职务：
</div>
<div class="ant-col-14">{{model_show.position}}</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"
v-if='model_show.extends!=null'>
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">身份证：</div>
<div class="ant-col-14">{{model_show.extends.credentials_number}}</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"
v-if='model_show.extends!=null'>
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">是否参加考察活动：
</div>
<div class="ant-col-14">不参加</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"
v-if='model_show.extends!=null'>
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">是否在陕有投资项目：
</div>
<div class="ant-col-14">{{model_show.has_project!=null?model_show.has_project:'没有'}}</div>
</div>
<div class="ant-row" style="margin-bottom: 10px; font-size: 16px;"
v-if='model_show.extends!=null'>
<div class="ant-col-10"
style="text-align: right; padding-right: 10px; color: rgba(138, 137, 137, 0.65);">是否需要大会接机：
</div>
<div class="ant-col-14">{{model_show.flight_info!=null?model_show.flight_info:'不需要'}}</div>
</div>
</div>
</div>
<div slot="footer">
<!-- is_audit 1：通过 2：未审核 3：拒绝 -->
<i-button type="error" @click='applyActivity(1)'>取 消</i-button>
<i-button type="warning" @click='applyActivity(2)'>拒 绝</i-button>
<i-button type="primary" @click='applyActivity(3)'>通 过</i-button>
</div>
</Modal>
js
var app = new Vue({
el: '#app',
data: {
left_info: 'dark',
c_h: 200,
screen_h: 0,
is_apply: false,
model_show: {},
columns: [],
tableData: [],
ticket_select: []
},
methods: {
// 审核活动
applyActivity(status) {
// status 1 取消 2 拒绝 3 通过
console.log(status, 'ssss', typeof status)
if (status === 1) {
this.is_apply = false
} else {
var status = status
var res = {
order: status == 3 ? 'allow' : '',
enroll_id: this.model_show.weid
}
let that = this
$.ajax({
url: api_domain + 'activity/enroll/audit',
type: 'POST',
headers: {
"token": plats_token //此处放置请求到的用户token
},
dataType: 'json',
cache: false,
async: true,
data: res, //使用变量sendData
//执行成功的回调函数
success: (res) => {
that.is_apply = false
if (res.code !== 200) {
layui.use('layer', function () {
var layer = layui.layer;
layer.msg(res.message, {
time: 1500
});
})
return false
} else {
layui.use('layer', function () {
var layer = layui.layer;
layer.msg('修改成功', {
time: 1500
});
location.reload()
})
}
},
//执行失败或错误的回调函数
error: (data) => {}
})
}
},
// 展示模态框
showModel(res) {
console.log('132456', res)
let that = this
$.ajax({
url: api_domain + '/activity/panel/enroll/enroll_detail',
type: 'GET',
headers: {
"token": plats_token //此处放置请求到的用户token
},
dataType: 'json',
cache: false,
async: true,
data: res, //使用变量sendData
//执行成功的回调函数
success: (res) => {
if (res.code !== 200) return false
that.is_apply = true
that.model_show = res.data
console.log(that.ticket_select, 'that.ticket_select')
},
//执行失败或错误的回调函数
error: (data) => {}
})
},
// 渲染列表
setColumns() {
var columns = [{
title: '序号',
key: 'id',
width: '80',
editable: true
}, {
title: '报名人员',
key: 'number',
render: (h, params) => {
return h('div', [
h('div', {
props: {
type: 'name'
},
style: {
display: 'block',
fontSize: '14px',
color: '#ccc'
}
}, params.row.name),
h('div', {
props: {
type: 'position'
},
style: {
display: 'block',
fontSize: '14px',
color: '#ccc'
}
}, params.row.position),
h('div', {
props: {
type: 'phone'
},
style: {
display: 'block',
fontSize: '14px',
color: '#ccc'
}
}, params.row.phone),
]);
},
editable: true
}, {
title: '票务信息',
key: 'ticket_info',
editable: true
},
// {
// title: '分组',
// key: 'group',
// render: (h, params) => {
// return h('Select', {
// props: {
// value: this.vmodel
// },
// on: {
// 'on-change': (e) => {
// console.log(e)
// }
// },
// style: {
// display: 'block',
// fontSize: '14px',
// color: '#ccc',
// width: '120'
// }
// }, params.row.values.map((item) => {
// return h('Option', {
// props: {
// value: item.value,
// label: item.label
// }
// })
// }))
// },
// editable: true
// },
{
title: '审核',
key: 'status',
// is_audit 1：通过 2：未审核 3：拒绝
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'default',
},
style: {
display: (params.row.status == 1) ? 'block' : 'none'
},
on: {
click: () => {
}
}
}, '不需要审核'), h('Button', {
props: {
type: (params.row.audit == 1) ? 'error' : (params.row.audit == 2) ? 'warning' : (
params.row.audit == 3) ? 'primary' : '',
size: 'default',
},
style: {
display: (params.row.status == 2) ? 'block' : 'none'
},
on: {
click: () => {
var sendData = {
enroll_id: params.row.enroll_id,
activity_id: params.row.activity_id
}
app.showModel(sendData)
}
}
}, (params.row.audit == 1) ? '通过' : (params.row.audit == 2) ? '审核' : (params.row
.audit == 3) ? '拒绝' : ''),
])
},
editable: true
}, {
title: '签到',
key: 'sign',
editable: true
}
]
this.columns = columns
},
// 获取分组
getSelect(activity_id) {
let that = this
$.ajax({
url: api_domain + '/activity/panel/label/lists',
type: 'GET',
headers: {
"token": plats_token //此处放置请求到的用户token
},
dataType: 'json',
cache: false,
async: true,
data: activity_id, //使用变量sendData
//执行成功的回调函数
success: (res) => {
if (res.code !== 200) return false
var data = res.data
var val = []
for (var i in data) {
val[i] = {
value: data[i].weid,
label: data[i].title
}
}
that.ticket_select = val
console.log(that.ticket_select, 'that.ticket_select')
},
//执行失败或错误的回调函数
error: (data) => {}
})
},
// 获取数据
getData(sendData) {
this.setColumns()
let that = this
$.ajax({
url: api_domain + '/activity/panel/enroll/enroll_list',
type: 'GET',
headers: {
"token": plats_token //此处放置请求到的用户token
},
dataType: 'json',
cache: false,
async: true,
data: sendData, //使用变量sendData
//执行成功的回调函数
success: function (res) {
if (res.code !== 200) return false
var tables = []
var data = res.data.list
for (var i in res.data.list) {
tables[i] = {
id: i,
number: '8',
name: data[i].real_name,
position: data[i].position,
phone: data[i].telphone,
ticket_info: data[i].name,
values: that.ticket_select,
status: data[i].need_audit,
audit: data[i].is_audit,
// audit: 1,
is_apply: false,
sign: data[i].signStatus == 1 ? '未签到' : data[i].signStatus == 2 ? '已签到' : '',
enroll_id: data[i].weid,
activity_id: sendData.activity_id
}
}
console.log(tables, 'tables')
that.loading = false
that.tableData = tables
},
//执行失败或错误的回调函数
error: function (data) {}
})
}
},
mounted() {
this.screen_h = -document.body.clientHeight
this.c_h = window.screen.height - 264
let that = this;
this.$nextTick(function () {
var sendData = {
page: 1,
limit: 10,
name: '',
telphone: '',
activity_id: window.location.href.split('?')[1].split('=')[1]
}
this.getSelect({
activity_id: window.location.href.split('?')[1].split('=')[1]
})
that.getData(sendData)
})
},
})
通过定义new Vue为app 设置vue中methods的数据