v-html 设置行高

v-html是Vue.js的一个指令，用于将数据渲染为HTML。它并不直接影响行高的设置，行高是通过CSS来控制的。如果你想设置行高，可以使用以下方法：

1. 使用CSS样式：可以通过给el-table__row类添加样式来设置行高。例如，你可以在样式中添加以下代码：

.el-table__row {
  height: 30px; /* 设置行高为30px */
}

2. 使用cell-style属性：你也可以使用cell-style属性来设置行高。在el-table标签上添加cell-style属性，并设置为一个返回样式对象的方法。例如：

<el-table :data="tableData" :cell-style="cellStyle"></el-table>

然后在Vue实例中定义cellStyle方法：

methods: {
  cellStyle({ row, column, rowIndex, columnIndex }) {
    return { height: '30px' };
  }
}

相关问题

el-table+行高

在Vue.js的Element UI库中，`el-table`是一个用于创建表格组件的强大工具。关于设置行高，你可以通过CSS直接控制`tr`元素的`line-height`属性来调整。例如，如果你想让表格的行高为30像素，可以在`.el-table tr`的选择器上添加样式：

.el-table tr {
  line-height: 30px;
}

如果你需要动态调整行高，也可以在Vue组件的数据里定义一个变量，并在模板中绑定这个变量：

<template>
  <el-table :data="tableData">
    <!-- 其他表头和列配置 -->
    <tr v-bind:class="{ 'custom-line-height': customLineHeight }">
      <!-- 表格内容 -->
    </tr>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [...],
      customLineHeight: false, // 根据业务需求设置是否应用自定义行高
    };
  },
  computed: {
    // 如果有计算值决定行高变化，可以在这里处理
    calculatedLineHeight() {
      // 返回你需要的行高数值
      return this.customLineHeight ? '30px' : '系统默认行高';
    }
  },
  methods: {
    toggleCustomLineHeight() {
      this.customLineHeight = !this.customLineHeight; // 可以在这里添加切换功能
    }
  },
};
</script>

然后，在`toggleCustomLineHeight`方法中，你可以控制`customLineHeight`的状态来开启或关闭自定义行高。

vue-codemirror 行高亮

可以使用vue-codemirror组件来实现行高亮。具体步骤如下：

1.首先在Vue项目中安装vue-codemirror组件：

npm install vue-codemirror --save

2.在需要使用行高亮的组件中引入vue-codemirror组件：

import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'

Vue.use(VueCodemirror)

3.在模板中使用vue-codemirror组件，并设置相应的属性：

<template>
  <div>
    <codemirror ref="myCm" v-model="code" :options="cmOptions"></codemirror>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      cmOptions: {
        mode: 'text/javascript',
        lineNumbers: true,
        styleActiveLine: true,
        matchBrackets: true,
        lineWrapping: true,
        extraKeys: {
          'Ctrl-Space': 'autocomplete'
        }
      }
    }
  }
}
</script>

4.在cmOptions中设置styleActiveLine为true即可实现行高亮。