使用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'
}
])