在el-table中使用formatter替代插槽使用

Jinxiansen0211

于 2024-08-29 11:23:09 发布

阅读量210

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Jinxiansen0211/article/details/141674051

版权

在在el-table中处理 el-table-column的一些自定义列的时候有时候不方便使用插槽，这时候可以用formatter函数的Vnode替代。

  // 引入组件和图标
  import { ElInput} from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  // 函数
  const formatter = (row, column) => {
  	// 如果有多个列使用formatter 函数，这里用property 区分
    if (column.property == 'warehouseLink') {
    	// 这里是我的业务所需要，可以根据自己的业务自行调整，重点是h函数
      if (row.id == -1) {
        return h(ElInput, {
          modelValue: lineSearchQuery.value[column.property],
          'onUpdate:modelValue': (value) => {
            lineSearchQuery.value[column.property] = value;
          },
          'onKeyup': (event) => {
            if (event.key === 'Enter') {
              handleQuery();
            }
          },
          'prefix-icon': Search,
          style: 'width: 100%'
        });
      } else {
        const storestr = row.warehouseLink?.map(item => item.warehouseName)
        return storestr?.join('、')
      }
    }
  }