markdown-it中table内容过多横向可滚动效果

最新推荐文章于 2024-10-10 20:59:20 发布

你好小马哥

最新推荐文章于 2024-10-10 20:59:20 发布

阅读量173

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_34955596/article/details/141061846

版权

1、安装插件

npm i markdown-it

2、页面引入使用

<template>
    <div class="markdownNav" v-html="getMarkdownData"> </div>
  </template>
  
  <script  setup name="markdownNav" lang="ts">
  import MarkdownIt from 'markdown-it';
  

  const props = defineProps({
    modelValue: {
    type: String,
    default: ''
  }
})

const getMarkdownData = computed(()=>{
    
  const md = new MarkdownIt();
  
  // 保存原始表格渲染器
  const originalTableOpen = md.renderer.rules.table_open || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };

  // 定义自定义的表格渲染器
  md.renderer.rules.table_open = function (tokens, idx, options, env, self) {
    // 生成包裹元素的开始标签
    return '<div class="table-wrapper">\n' + originalTableOpen(tokens, idx, options, env, self);
  };

  // 保存原始表格结束渲染器
  const originalTableClose = md.renderer.rules.table_close || function (tokens, idx, options, env, self) {
    return self.renderToken(tokens, idx, options);
  };

  // 定义自定义的表格结束渲染器
  md.renderer.rules.table_close = function (tokens, idx, options, env, self) {
    // 生成包裹元素的结束标签
    return originalTableClose(tokens, idx, options, env, self) + '</div>\n';
  };



  return md.render(`
  搜到哈师大发货时案号设定接口哈数据库的阿萨德花开时。
1. **阿萨德** 啊实打实阿萨德
2. **阿萨德222** 阿萨德222
3. **阿萨德333** 阿萨德333



|列1|列2|列3|列3|列3|列3|
|:----|:----:|:----:|:----:|:----:|----:|
|张三|语文|99|99|99|99|
|李四|数学|98|99|99|99|
|王五|体育|97|99|99|99|


  );
  })


  </script>
  
  
  <style lang="scss" scoped>
  .markdownNav {
    width: 100%;
    max-width: 100%;
  
    ::v-deep(.table-wrapper) {
      width: 100%;
      overflow-x: scroll;
      overflow-y: hidden;
      padding-bottom: 4px;
  
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
  
      &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #444;
        cursor: pointer;
      }
  
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }
    }
  
    ::v-deep(table) {
      border: 1px solid red;
      width: 100%;
      border-collapse: collapse;
  
  
  
      tr,
      td,
      th {
        border: 1px solid red;
        text-align: center !important;
        height: 40px !important;
        min-width: 160px !important;
      }
    }
  
  }
  </style>

3、效果如下：在这里插入图片描述