vaemusic / datav-vue3

datav Vue3+TS+Vite版

Home Page:https://datav-vue3.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

请教如何修改轮播表的样式

HYT810 opened this issue · comments

请问如何修改轮播表行号字体大小和列表内容文字大小

2

data 数据和表头的 header 可以解析 html 格式数据,可以 通过传 html 格式数据设置 style 来修改 data 数据的样式

例如:

const config = reactive({
  // 此处数据可以是 html
  header: ['列1', '列2', '列3'],
  data: [
    // 此处数据可以是 html
    ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
    ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
    ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
    ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
    ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
    ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
    ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
    ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
    ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
    ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3'],
  ],
})

那行号字体可以修改吗,字太小了,就算改了内容的字体,行号字体也得改

行号可以通过 vue 的 :deep() 样式穿透来修改行号 index 的样式

<style scoped>
  :deep(.index){
    font-size: 30px;
  }
</style>

可以了大佬,多谢,之前都不知道还有有这个东西