VForm 2 数据表格表格列编辑 动态渲染函数怎么使用

TOCOOL

请问 VForm 2 数据表格 表格列编辑 动态渲染函数怎么使用？
1、比如按条件 动态渲染修改 表格内的字体颜色 或填充颜色，怎样实现
2、是否在表格内支持插槽方式，怎样能实现

justin1024已获得悬赏 200 威望

最佳答案

表格列只能通过动态渲染函数,可以参考一下这段代码 详细h函数的使用可以网上搜一下，这个是vue的

• justin1024
• 发表于2023-03-17
• 详细答案 >

justin1024

表格列只能通过动态渲染函数,可以参考一下这段代码

1. const {row, column, dataTableRef} = params
   
2. // 可以进一步通过dataTableRef获取v-form-render的引用，dataTableRef.getFormRef()。如果表格处在弹窗里，需要使用dataTableRef.getFormRef().getTopFormRef()
   
3. let cellValue = row[column.prop] || ''
   
4. let updateValue = (newValue) => {
   
5.   row.xxx = newValue
   
6. }
   
7. 
   
8. return h('el-input', {
   
9.   props: {
   
10.     value: cellValue,
    
11.     ... 其他属性
    
12.   },
    
13.   on: {
    
14.     input: updateValue
    
15.   }
    
16. })
    

复制代码

详细h函数的使用可以网上搜一下，这个是vue的

admin

下面是一段示例代码（适合Vue2 + VForm2），将一列的单元格内容渲染为input输入框：
---------------------------------------------------

1. let {row, column} = params
   
2. let cellValue = row[column.prop] || ''
   
3. let updateValue = (newValue) => {
   
4.   row.name = newValue
   
5. }
   
6. 
   
7. return h('el-input', {
   
8.   props: {
   
9.     value: cellValue
   
10.   },
    
11.   on: {
    
12.     input: updateValue
    
13.   }
    
14. })

复制代码

TOCOOL

justin1024 发表于 2023-3-17 13:39
表格列只能通过动态渲染函数,可以参考一下这段代码

请问能动态渲染修改 表格内的字体颜色 或填充颜色吗？

justin1024

TOCOOL 发表于 2023-3-17 14:24
请问能动态渲染修改 表格内的字体颜色 或填充颜色吗？

表格内的字体颜色，可以从写class

admin

TOCOOL 发表于 2023-3-17 14:24
请问能动态渲染修改 表格内的字体颜色 或填充颜色吗？

再送你一段代码吧，价值5块（将单元格的文字显示为红色，适合vue2）：
------------------------

1. const {row, column} = params
   
2. const cellValue = row[column.prop] || ''
   
3. 
   
4. return h('div', {style: {color: 'red'}}, cellValue)

复制代码

数据表格自定义render的使用，请详细参考vue官方文档：
Vue2文档：
https://v2.cn.vuejs.org/v2/guide/render-function.html


Vue3文档:
https://cn.vuejs.org/guide/extras/render-function.html

admin

以下代码将某一列渲染为el-input输入框，适用于VForm3（vue3）：
------------------

1. let {row, column} = params
   
2. let cellValue = row[column.prop] || ''
   
3. 
   
4. return h(components.ElInput, {
   
5.     modelValue: cellValue,
   
6.     onInput(val) {
   
7.       //console.info('aaaa', val)
   
8.       row.name = val
   
9.     }
   
10.   }
    
11. )
    

复制代码

justin1024

h函数的例子， 可以先根据条件判定显示的样式，然后设置在style里
h('div', { id: 'app' }, [
  h('h1', { class: 'title' }, 'Hello, world!'),
  h('p', {
    style: {
      backgroundColor: 'blue',
      color: 'white'
    }
  }, 'This is a paragraph.')
]);

justin1024

目前表格内是不支持插槽的