vue 动态更改columnDefs某一列字体颜色

忘是亡心i 2024-03-26 08:29 120阅读 0赞

可以使用 Vue.set 或者 $set 在动态更新列的定义时更新某一列的样式。

例如：

  1. let columnDefs = [
  2.   { field: "name", displayName: "Name" },
  3.   { field: "age", displayName: "Age" }
  4. ];
  6. Vue.set(columnDefs[0], 'style', { color: 'red' });
  8. // 或者
  10. this.$set(columnDefs[0], 'style', { color: 'red' });

然后，您可以在渲染列时使用这些样式：

  1. <template>
  2.   <div>
  3.     <table>
  4.       <thead>
  5.         <tr>
  6.           <th v-for="column in columnDefs" :style="column.style">{
  7.       { column.displayName }}</th>
  8.         </tr>
  9.       </thead>
  10.       <tbody>
  11.         <!-- ... -->
  12.       </tbody>
  13.     </table>
  14.   </div>
  15. </template>
  17. <script>
  18. export default {
  19.   data() {
  20.     return {
  21.       columnDefs: [
  22.         { field: "name", displayName: "Name", style: { color: 'red' } },
  23.         { field: "age", displayName: "Age" }
  24.       ]
  25.     };
  26.   }
  27. };
  28. </script>

希望这能帮到您！

发表评论

表情：
评论列表 （有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读