前端-naive ui如何渲染表格中的开关switch、单选框checkbox、按钮

最新推荐文章于 2024-06-21 16:56:23 发布

大嘴史努比

最新推荐文章于 2024-06-21 16:56:23 发布

阅读量812

点赞数 9

文章标签：前端

本文链接：https://blog.csdn.net/qq_42371932/article/details/136641232

版权

目的：在表格中渲染如下效果

做法：在column的配置项中，利用h函数来渲染你想要的效果，h函数的具体使用可以参考链接渲染函数 & JSX | Vue.js (vuejs.org)

 {
    key: 'isEnabled', title: '启用状态',
    searchType: 'select',
    searchOptions: () => qiyongOption.value,
    render: (row) => [
      h(
        NPopconfirm,
        {
          onPositiveClick: async () => {
            row.isEnabled = row.isEnabled === 1 ? 0 : 1
            for (const key in row) {
              if (Object.hasOwnProperty.call(row, key)) {
                if (row[key] === '-') {
                  row[key] = null;
                }
              }
            }
            //编辑并刷新列表
            await editList(row).then((res: any) => {
            }).catch((err) => {
              row.isEnabled = row.isEnabled === 1 ? 0 : 1
            });
            tableRef.value?.reload()
          }
        },
        {
          trigger: () => {
            return h(
              NSwitch,
              {
                value: row.isEnabled,
                checkedValue: 1,
                uncheckedValue: 0,
              },
              { default: () => '' }
            )
          },
          default: () => {
            return '确认启用/停用吗？'
          }
        }
      )
    ]
  },

{
    key: 'maintenanceReminder', title: '保养提醒', hideInSearch: true,
    render(row, index) {
      return h(NCheckbox, {
        checked: row.maintenanceReminder,
        onUpdateChecked: async (newVal) => {
          row.maintenanceReminder = newVal;
          let temp = row.forceShutdown
          if (row.maintenanceReminder === false) {
            row.forceShutdown = false
          }
          //刷新列表
          await editList(row).then((res: any) => {
            tableRef.value?.reload()
          }).catch(() => {
            row.maintenanceReminder = !row.maintenanceReminder;
            row.forceShutdown = temp;
          });
        },
      },);
    }
  },
  {
    key: 'forceShutdown', title: '强制停机', hideInSearch: true,
    render(row, index) {
      return h(NCheckbox, {
        disabled: !row.maintenanceReminder,
        checked: row.forceShutdown,
        onUpdateChecked: async (newVal) => {
          row.forceShutdown = newVal;
          console.log("强制停机现在是", row.forceShutdown);
          //刷新列表
          await editList(row).then((res: any) => {
            tableRef.value?.reload()
          }).catch(() => {
            row.forceShutdown = !row.forceShutdown;
          });
        },
      });
    }
  },