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>

<span class="ant-modal-title" id="rcDialogTitle0">报名人信息审核</span>

</p>

<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-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 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-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>

<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>

<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>

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的数据

iView UI库解决基于vue.js解决table中this的指向问题相关推荐

基于vue的响应式ui框架_基于Vue.js的响应式和可配置UI框架
基于vue的响应式ui框架 Framevuerk (Framevuerk) Fast, Responsive, Multi Language, Both Direction Support and C ...
iView 3.3.0 发布，基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
iView 3.4.0 发布，基于 Vue.js 的企业级 UI 组件库
百度智能云云生态狂欢季热门云产品1折起>>> iView 3.4.0 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品 ...
Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
html九图拼图游戏代码,基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列 ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
vue.js解决刷新404找不到页面问题
vue.js解决刷新404找不到页面问题参考文章: (1)vue.js解决刷新404找不到页面问题 (2)https://www.cnblogs.com/Javame/p/11020737.html ...
html网页点击按钮闪现怎么解决,解决使用Vue.js显示数据的时,页面闪现原始代码的问题...
今天开始学习Vue.js的使用,但是在学习过程中发现一个问题,那就是页面加载数据时,原始代码会闪现一下.查访各方资料,终的解决方法. 第一步.加入一段css代码 [v-cloak] { display ...

iView UI库解决基于vue.js解决table中this的指向问题

iView UI库解决基于vue.js解决table中this的指向问题相关推荐

最新文章

热门文章