naive ui 组件库表格引用下拉框 vue3

使用naive ui组件库dataTable表格组件自定义下拉编辑框。
示例:
在这里插入图片描述

1. html代码

<n-data-table
   :columns="zyyhqkColumns"
    :data="zyyhqkData"
    :key="(row) => row.key"
    striped
    scroll-x
    max-height="350"
    style="margin-bottom: 14px"
    :bordered="false"
    :size="'small'"
/>

2. js代码

// 导入组件
import { ref, h } from "vue";
import {NDataTable, NSelect } from "naive-ui";

//  表格columns
const zyyhqkColumns = ref([
   {
   	  title: "序号",
     fixed: "left",
     key: "xh",
     width: 80,
     align: 'center',
     render: (_, index) => {
       return `${index + 1}`;
     },
   },
   {
   	title: "自备电源类型",
  	 	key: "zbdylx",
   	align: 'center',
       width: 240,
       ellipsis: {
         tooltip: true,
       },
       render(row,index) {
         const { zbdylx } = row;
         return h(
           'div',
           {
             style: { 'min-height': '34px' },
           },
           [
             h('div',
             {
               style:{
                  display:'flex',
                  'justify-content':'center',
                  'align-items':'center',
               }
             },
             [
               h(
                 NSelect,
                 {
                   style:{
                     width:'240px',
                   },
                   value: zbdylx ? zbdylx: null,
                   clearable: true,
                   options: [
                     {
                       label:'张三',
                       value:'zhangsan'
                     },
                     {
                       label:'李四',
                       value:'lisi'
                     }
                   ],
                   'on-update:value': labelSelectUpdate.bind(index, row),
                 },
                 { default: () => zbdylx}
             ),
           ]),
         ]
     )
   }
 },
])


/**
* 表格自定义选择框 值更新时方法
* @param row 表格当前行obj
* @param value 选择框更改后的值
* */
const labelSelectUpdate = (row,value)=>{
 row.zbdylx = value;
}


// 表格数据
const zyyhqkData = ref([
 {
   zbdylx:'zhangsan'
 },
 {
   zbdylx:'lisi'
 }
])




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值