search

x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.61k stars 1.05k forks source link

格式化列，使用全局化mixin，发现{CellValue}是undefined，去掉{}才正常 #733

Closed chen3728060 closed 4 years ago

chen3728060 commented 4 years ago

（必填）请填写问题描述 Describe the bug

按照官方文档，局部format是正常的。但是全局format的mixin会发现 formatSex ({ cellValue }) { console.log(cellValue) //得到的是undefined return cellValue ? (cellValue === '1' ? '男' : '女') : '' },

改为

formatSex (cellValue ) { **console.log(cellValue) //正常，得到单元格内的值，没有其他对象 return cellValue ? (cellValue === '1' ? '男' : '女') : '' },

（必填）请填写能重现问题的链接，例如

官方文档 https://xuliangzhan_admin.gitee.io/vxe-table/v2/index.html#/table/base/format

填写报错信息或截图 Error message or screenshots

暂无

（必填）请填写期望的结果 Expected behavior

是bug还是我用法不对？

chen3728060 commented 4 years ago

还有，jsrun.net 这个在线代码网站，挂了

mylysddp commented 4 years ago

你好，像请教下，我也是根据官方例子来写，但是在一开始调用VXETable.formats.add 的时候就提示找不到add、mixin 等参数，尝试着将console.log(VXETable) ,发现里面根本就没有formats 这个属性，是不是还需要安装什么插件。

chen3728060 commented 4 years ago

不需要安装插件。应该是你写代码的位置不正确。你写在哪里？截图我看看------------------ 原始邮件 ------------------ 发件人: "mylysddp"notifications@github.com 发送时间: 2020年3月26日(星期四) 上午9:37 收件人: "xuliangzhan/vxe-table"vxe-table@noreply.github.com; 抄送: "chen3728060"chen3728060@qq.com;"Author"author@noreply.github.com; 主题: Re: [xuliangzhan/vxe-table] 格式化列，使用全局化mixin，发现{CellValue}是undefined，去掉{}才正常 (#733)

你好，像请教下，我也是根据官方例子来写，但是在一开始调用VXETable.formats.add 的时候就提示找不到add、mixin 等参数，尝试着将console.log(VXETable) ,发现里面根本就没有formats 这个属性，是不是还需要安装什么插件。

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

yan695432 commented 4 years ago

你好，像请教下，我也是根据官方例子来写，但是在一开始调用VXETable.formats.add 的时候就提示找不到add、mixin 等参数，尝试着将console.log(VXETable) ,发现里面根本就没有formats 这个属性，是不是还需要安装什么插件。

我同样也遇到这样的情况，我将官方的代码放在main.js 里面 你解决了嘛？

chen3728060 commented 4 years ago

你怎么写的mixin代码？截图看看

yan695432 commented 4 years ago

image 我直接把网站上的代码贴到main.js

yan695432 commented 4 years ago

image 然后就会报错

chen3728060 commented 4 years ago

能回复一个正常点的图片吗？用邮箱自带的，外部的图片，被qq过滤了····

yan695432 commented 4 years ago

我是贴在main.js 里面，然后就会提示mixin是undefined

------------------ 原始邮件 ------------------ 发件人: "chen3728060"<notifications@github.com>; 发送时间: 2020年3月27日(星期五) 下午4:13 收件人: "xuliangzhan/vxe-table"<vxe-table@noreply.github.com>; 抄送: "-.-"<125722066@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [xuliangzhan/vxe-table] 格式化列，使用全局化mixin，发现{CellValue}是undefined，去掉{}才正常 (#733)

能回复一个正常点的图片吗？用邮箱自带的，外部的图片，被qq过滤了···· — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

chen3728060 commented 4 years ago

那你试一下这样的顺序摆放代码。先不用add

import XEUtils from 'xe-utils'

import VXETable from 'vxe-table' import 'vxe-table/lib/index.css'

Vue.use(VXETable)

//自定义全局的格式化处理函数 VXETable.formats.mixin({ // 格式化真假 formatTF(cellValue) { return cellValue === true ? '是' : '否' },

})

yan695432 commented 4 years ago

也测试过了，也是不行的

chen3728060 commented 4 years ago

你console.log(VxeTable)?mixin混入的时候，vue实例都还没创建，你打印啥呢？

yan695432 commented 4 years ago

我没有console.log(VxeTable)，刚运行起来界面就一片空白，然后console里面就有这句话了

------------------ 原始邮件 ------------------ 发件人: "chen3728060"<notifications@github.com>; 发送时间: 2020年3月27日(星期五) 下午4:28 收件人: "xuliangzhan/vxe-table"<vxe-table@noreply.github.com>; 抄送: "-.-"<125722066@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [xuliangzhan/vxe-table] 格式化列，使用全局化mixin，发现{CellValue}是undefined，去掉{}才正常 (#733)

你console.log(VxeTable)?mixin混入的时候，vue实例都还没创建，你打印啥呢？ — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

chen3728060 commented 4 years ago

你的报错，应该不是main.js报的把？应该是你的业务页面报的吧？所以我问你，究竟你那些mixin代码，写哪里？

yan695432 commented 4 years ago

我把main.js 里面的VXETable.formats.mixin({}) 代码去掉，就不会报错，其他地方都没有写mixin

------------------ 原始邮件 ------------------ 发件人: "chen3728060"<notifications@github.com>; 发送时间: 2020年3月27日(星期五) 下午4:33 收件人: "xuliangzhan/vxe-table"<vxe-table@noreply.github.com>; 抄送: "-.-"<125722066@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [xuliangzhan/vxe-table] 格式化列，使用全局化mixin，发现{CellValue}是undefined，去掉{}才正常 (#733)

你的报错，应该不是main.js报的把？应该是你的业务页面报的吧？所以我问你，究竟你那些mixin代码，写哪里？ — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

chen3728060 commented 4 years ago

把你main js的代码复制给我看看

yan695432 commented 4 years ago

import Vue from 'vue' import App from './App.vue' import router from './router' // vfd import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' import VueContextMenu from 'vue-contextmenu' import vcolorpicker from 'vcolorpicker' import './plugins/element.js' // 导入字体图标 import './assets/fonts/iconfont.css' // 导入全局样式表 import './assets/css/global.css' import './assets/css/element-ui.css' // 加载公共组件 import plugins from './components/index' // 导入axios import axios from 'axios' import store from './store' // 导入vxe-table // import 'xe-utils' import XEUtils from 'xe-utils' import VXEUtils from 'vxe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/index.css' // v-charts import VCharts from 'v-charts' // 全局配置变量、方法 import globalFuncVariable from '@/uitls/index.js' // 导入md5.js import Md5 from '@/uitls/md5.js' // 本机设置基础URL axios.defaults.baseURL = 'http://localhost:5555' Vue.prototype.$http = axios

// 是否有请求在刷新token window.isRefreshing = false // 被挂起的请求数组 let subscribesArr = []

// push所有请求到数组中 function subscribeTokenRefresh(cb) {   subscribesArr.push(cb) }

// 用新token发起请求 function reloadSubscribesArr(token) {   subscribesArr.map(cb => cb(token)) }

/*   快过期了 和 已经过期了   @returns {boolean}  / function isTokenExpired() {   let expiredTime = store.state.expirationTime   if (expiredTime) {     let nowTime = new Date().getTime()     let willExpired = (expiredTime - nowTime) / 1000 < 10 * 60     return willExpired   }   return false }

function directLogin() {   router.push('/Login') }

// http request 请求拦截器 axios.interceptors.request.use(   config => {     if (config.headers.loading === undefined || config.headers.loading === true) {       store.dispatch('showloader')     }     // config.headers.Authorization = 'Bearer ' + store.state.accessToken     //   return config     // // 如果是不需要token的接口直接返回即可     if (config.url.startsWith('/login') || config.url === '/login' || config.url === '/refresh-token') {       return config     }     // 获取token     const token = store.state.accessToken     // 如果token存在，首先校验是否已经过期，如果已经过期，跳转到登录页面     if (token) {       let refreshToken = store.state.refreshToken       if (isTokenExpired() && config.url !== '/refresh-token') {         if (!window.isRefreshing) {           window.isRefreshing = true           axios.post('/refresh-token', { accessToken: token, refreshToken: refreshToken })             .then(({ data: res }) => {               window.isRefreshing = false               if (res.isSuccess) {                 const tokenVo = res.data                 store.commit('set_accessToken', tokenVo)                 reloadSubscribesArr(tokenVo)               } else {                 subscribesArr = []                 window.localStorage.clear()                 directLogin()               }             })             .catch(() => {               window.isRefreshing = false               subscribesArr = []               window.localStorage.clear()               directLogin()             })         }         let retry = new Promise((resolve, reject) => {           subscribeTokenRefresh((newToken) => {             config.headers.Authorization = Bearer&nbsp;${newToken}             resolve(config)           })         })         return retry       } else {         config.headers.Authorization = Bearer&nbsp;${token}         return config       }     } else {       directLogin()     }   },   err => {     return Promise.reject(err)   } )

// 设置全局的请求次数，请求的间隙 axios.defaults.retry = 4 axios.defaults.retryDelay = 1000

axios.interceptors.response.use(function (response) {   store.dispatch('hideloader')   return response }, function axiosRetryInterceptor(err) {   var config = err.config   // If config does not exist or the retry option is not set, reject   if (!config || !config.retry) return Promise.reject(err)

  // Set the variable for keeping track of the retry count   config.retryCount = config.retryCount || 0

  // Check if we've maxed out the total number of retries   if (config.__retryCount >= config.retry) {     // Reject with the error     return Promise.reject(err)   }

  // Increase the retry count   config.__retryCount += 1

  // Create new promise to handle exponential backoff   var backoff = new Promise(function (resolve) {     setTimeout(function () {       resolve()     }, config.retryDelay || 1)   })

  // Return the promise in which recalls axios to retry the request   return backoff.then(function () {     return axios(config)   }) }) // 设置请求超时时间 axios.defaults.timeout = 60000 Vue.config.productionTip = false

VXETable.setup({   // 表格的全局参数   size: 'mini',   border: true,   resizable: true,   highlightCurrentRow: true,   highlightHoverRow: true })

// 自定义全局的格式化处理函数 VXETable.formats.mixin({   // 格式化性别   formatSex({ cellValue }) {     return cellValue ? (cellValue === '1' ? '男' : '女') : ''   },   // 格式化下拉选项   formatSelect({ cellValue }, list) {     const item = list.find(item => item.value === cellValue)     return item ? item.label : ''   },   // 格式化日期，默认 yyyy-MM-dd HH:mm:ss   formatDate({ cellValue }, format) {     return XEUtils.toDateString(cellValue, format || 'yyyy-MM-dd HH:mm:ss')   },   // 格式金额，默认2位数   formatAmount({ cellValue }, digits) {     return XEUtils.commafy(cellValue, { digits: digits || 2 })   },   // 格式化银行卡，默认每4位隔开   formatBankcard({ cellValue }) {     return XEUtils.commafy(cellValue, { spaceNumber: 4, separator: ' ' })   },   // 四舍五入,默认两位数   formatFixedNumber({ cellValue }, digits) {     return XEUtils.toNumber(cellValue).toFixed(digits || 2)   },   // 截取小数,默认两位数   formatCutNumber({ cellValue }, digits) {     return XEUtils.toFixedString(cellValue, digits || 2)   },   // 转换 moment 类型为字符串   toMomentString(cellValue, format) {     return cellValue ? cellValue.format(format) : ''   } }) // 注意必须在构建Vue实例之前就将需要的组件注册进去 Vue.use(plugins) // 使用vxe-table Vue.use(VXETable) Vue.use(VXEUtils, XEUtils) // vfd Vue.use(Antd) Vue.use(VueContextMenu) Vue.use(vcolorpicker) // 引用全局方法 Vue.use(globalFuncVariable) // // 引用md5 Vue.prototype.$md5 = Md5 // VCharts Vue.use(VCharts) new Vue({   router,   store,   render: h => h(App) }).$mount('#app')

------------------ 原始邮件 ------------------ 发件人: "chen3728060"<notifications@github.com>; 发送时间: 2020年3月27日(星期五) 下午4:40 收件人: "xuliangzhan/vxe-table"<vxe-table@noreply.github.com>; 抄送: "-.-"<125722066@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [xuliangzhan/vxe-table] 格式化列，使用全局化mixin，发现{CellValue}是undefined，去掉{}才正常 (#733)

把你main js的代码复制给我看看 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

chen3728060 commented 4 years ago

跟我代码也差不多，那你要问问作者了，我暂时解答不了

yan695432 commented 4 years ago

ok，我在找下原因，谢谢

------------------ 原始邮件 ------------------ 发件人: "chen3728060"<notifications@github.com>; 发送时间: 2020年3月27日(星期五) 下午4:49 收件人: "xuliangzhan/vxe-table"<vxe-table@noreply.github.com>; 抄送: "-.-"<125722066@qq.com>;"Comment"<comment@noreply.github.com>; 主题: Re: [xuliangzhan/vxe-table] 格式化列，使用全局化mixin，发现{CellValue}是undefined，去掉{}才正常 (#733)

跟我代码也差不多，那你要问问作者了，我暂时解答不了 — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.