[vue2]diff.js + ant-design table追溯修改变动

参考链接：https://www.npmjs.com/package/diff

diff.js + ant-design table追溯修改变动

//引入diff库
export const getHighLightDiff = (oldStr, str) => {
    if (!oldStr || !str) {
        return '';
    }
    const jsDiff = require('diff');
    const diff = jsDiff.diffChars(oldStr, str);

    let result = '';
    diff.forEach(part => {
        if (part.added) {
            //文字新增，红色
            result += "<span style='color:green'>";
            result += part.value;
            result += '</span>';
        } else if (part.removed) {
            //文字删减，灰色删除线
            result += "<del style='color:red'>";
            result += part.value;
            result += '</del>';
        } else {
            result += part.value;
        }
    });
    return result;
};

使用computer属性实时计算差异

diffTableData() {
    const len = this.tableData.length;
    const res = [];

    this.tableData.forEach((item, index, array) => {
        const curItem = cloneDeep(array[index]);

        // 与下一行进行比对
        if (index !== len - 1) {
            const oldItem = array[index + 1];

            // 原文
            const curOriginalText = curItem.originalText;
            const oldOriginalText = oldItem.originalText;
            curItem.originalText = getHighLightDiff(oldOriginalText, curOriginalText);

            // 译文
            const curTranslationText = curItem.translationText;
            const oldTranslationText = oldItem.translationText;
            curItem.translationText = getHighLightDiff(oldTranslationText, curTranslationText);
        }

        res.push(curItem);
    });