![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
，但是围起来了![[尴尬]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_11.8824107.png)
，应该是在维护![[思考]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_15.f58c082.png)
获得徽章 0
赞了这篇文章
aggrid刷新列表，cellRenderer里面的params未同步新数据问题
解决方法：gridApi.refreshCells强制刷新单元格
参考：
kkgithub.com
更新响应式数据同时调用gridapi更新内部数据并强制刷新单元格
export const useAgRowData = (initValue, gridApi) => {
const rowData = ref(initValue)
const setRowData = newValue => {
rowData.value = newValue
unref(gridApi).setGridOption('rowData', newValue)
unref(gridApi).refreshCells({ force: true })
}
return {
rowData,
setRowData
}
}
解决方法：gridApi.refreshCells强制刷新单元格
参考：
kkgithub.com更新响应式数据同时调用gridapi更新内部数据并强制刷新单元格
export const useAgRowData = (initValue, gridApi) => {
const rowData = ref(initValue)
const setRowData = newValue => {
rowData.value = newValue
unref(gridApi).setGridOption('rowData', newValue)
unref(gridApi).refreshCells({ force: true })
}
return {
rowData,
setRowData
}
}
展开
评论
2
高阶组件使用
import FormAutoWrapper from './FormAutoWrapper.vue';
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
<FormAutoWrapper>
<el-form-item prop="username" label="用户名">
<el-input v-model="formData.username" placeholder="请输入" />
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input v-model="formData.phone" placeholder="请输入" />
</el-form-item>
</FormAutoWrapper>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
</template>
</el-dialog>
import FormAutoWrapper from './FormAutoWrapper.vue';
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
<FormAutoWrapper>
<el-form-item prop="username" label="用户名">
<el-input v-model="formData.username" placeholder="请输入" />
</el-form-item>
<el-form-item prop="phone" label="手机号">
<el-input v-model="formData.phone" placeholder="请输入" />
</el-form-item>
</FormAutoWrapper>
</el-form>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
</template>
</el-dialog>
展开
1
1
unref实现原理
function unref(ref2) {
return isRef(ref2) ? ref2.value : ref2;
}
function isRef(r) {
return !!(r && r.__v_isRef === true);
}
function unref(ref2) {
return isRef(ref2) ? ref2.value : ref2;
}
function isRef(r) {
return !!(r && r.__v_isRef === true);
}
展开
评论
点赞
/**
* @description: 判断是否为空
* @param {*} v
* @returns {boolean}
*/
export function isEmpty(v) {
if (typeof v === 'object' && v !== null) {
if (Array.isArray(v)) {
return v.length === 0;
} else {
return Object.keys(v).length === 0;
}
}
return v === undefined || v === null || v === ''
}
* @description: 判断是否为空
* @param {*} v
* @returns {boolean}
*/
export function isEmpty(v) {
if (typeof v === 'object' && v !== null) {
if (Array.isArray(v)) {
return v.length === 0;
} else {
return Object.keys(v).length === 0;
}
}
return v === undefined || v === null || v === ''
}
展开
评论
点赞
赞了这篇文章
赞了这篇文章
赞了这篇沸点
评论
1
/**
* 格式化数值并生成可显示的字符串
* @param {number|function} value - 要格式化的数值或返回数值的函数
* @param {number} precision - 精度，保留小数位数，默认为0
* @param {string} thousandsSeparator - 千位分隔符，默认为','
* @param {string} decimalSeparator - 小数点分隔符，默认为'.'
* @returns {string} 格式化后的数值字符串
*/
function formatDisplayValue(value, precision = 0, thousandsSeparator = ',', decimalSeparator = '.') {
// 如果传入的值是函数，则直接调用该函数
if (typeof value === 'function') return value();
// 如果传入的值不是数字，直接返回
if (typeof value !== 'number') return value;
// 将传入的数字值转换为字符串，并通过小数点进行拆分，得到整数部分和小数部分（如果有的话）
let [integer, decimal = ''] = String(value).split('.');
// 在小数部分末尾补充0，直到达到指定的精度，然后截取合适长度的小数部分
decimal = decimal.padEnd(precision, '0').slice(0, precision > 0 ? precision : 0);
// 在整数部分中插入千位分隔符
integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
// 将整数部分和小数部分合并，并根据是否有小数部分确定使用哪种小数点分隔符
return [integer, decimal].join(decimal ? decimalSeparator : '');
}
formatDisplayValue(1234567.89, 2);
* 格式化数值并生成可显示的字符串
* @param {number|function} value - 要格式化的数值或返回数值的函数
* @param {number} precision - 精度，保留小数位数，默认为0
* @param {string} thousandsSeparator - 千位分隔符，默认为','
* @param {string} decimalSeparator - 小数点分隔符，默认为'.'
* @returns {string} 格式化后的数值字符串
*/
function formatDisplayValue(value, precision = 0, thousandsSeparator = ',', decimalSeparator = '.') {
// 如果传入的值是函数，则直接调用该函数
if (typeof value === 'function') return value();
// 如果传入的值不是数字，直接返回
if (typeof value !== 'number') return value;
// 将传入的数字值转换为字符串，并通过小数点进行拆分，得到整数部分和小数部分（如果有的话）
let [integer, decimal = ''] = String(value).split('.');
// 在小数部分末尾补充0，直到达到指定的精度，然后截取合适长度的小数部分
decimal = decimal.padEnd(precision, '0').slice(0, precision > 0 ? precision : 0);
// 在整数部分中插入千位分隔符
integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsSeparator);
// 将整数部分和小数部分合并，并根据是否有小数部分确定使用哪种小数点分隔符
return [integer, decimal].join(decimal ? decimalSeparator : '');
}
formatDisplayValue(1234567.89, 2);
展开
评论
点赞
export const example_SSO_HOST = window.getEnvConfig("example_host").SSO_HOST // 测试
console.log('example_SSO_HOST=:', example_SSO_HOST)
使用export导出的变量，npm run lib构建成npm包后，似乎可以保持住计算值时的方法
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "example_SSO_HOST", function() { return example_SSO_HOST; });
var example_SSO_HOST = window.getEnvConfig("example_host").SSO_HOST; // 测试
console.log('example_SSO_HOST=:', example_SSO_HOST);
console.log('example_SSO_HOST=:', example_SSO_HOST)
使用export导出的变量，npm run lib构建成npm包后，似乎可以保持住计算值时的方法
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "example_SSO_HOST", function() { return example_SSO_HOST; });
var example_SSO_HOST = window.getEnvConfig("example_host").SSO_HOST; // 测试
console.log('example_SSO_HOST=:', example_SSO_HOST);
展开
评论
3