vue3 ant-design-vue 踩坑_ant-design-vue 关闭a-select下拉项

废话不多说，直接冲冲冲

1.select 搜索，只需要添加两行代码即可实现

show-search
optionFilterProp=“label”

<a-select
      allow-clear
      v-model:value="value"
      :options="option"
      show-search
      optionFilterProp="label"   
      placeholder="请选择"
  />
1
2
3
4
5
6
7
8

**

2.表格的一些操作

<1>合并单元格

//合并相同字段方法
const setRowSpan = (data: any[], field: string) => {
  let count = 0; // 开始的第一项
  let indexCount = 1; // 对比的另外一项
  while (indexCount < data.length) {
    const item = data[count];
    // 初始化赋值
    if (!item.rowSpan) {
      item.rowSpan = 1;
    }
    // 判断当前项 和 后一项 的这个字段是否一致 一致则 合并的行数 +1
    // 给对比的 后面的这一项的 这个单元格设置为 0
    if (item[field] === data[indexCount][field]) {
      item.rowSpan++;
      data[indexCount].rowSpan = 0;
    } else {
      // 那说明 不相同 重新来过
      count = indexCount;
    }
    // 对比完后 进入下一项
    indexCount++;
  }
};


//使用
setRowSpan('表格数据', '合并的字段');

//配置columns
const columns = [
  {
    title: 'name',
    align: 'center',
    dataIndex: 'name',
    customRender: ({ text, record, index }) => {
      const obj = {
        children: text,
        props: {} as any,
      };
      // record 是当前行的数据
      obj.props.rowSpan = record.rowSpan;
      return obj;
    },
  }
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<2>修改单元格样式

我们需要用到customCell来修改指定列的样式

const columns = [
{
    title: '名称',
    align: 'center',
    dataIndex: 'name',
    slots: { customRender: 'runningCount' },
    customCell: (record, rowIndex) => {
    //判断逻辑，自行修改
      if (record.name=='test') {
         return { style: { background: 'rgb(245 161 161)' } };
      }
    },
  },
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<3>单元格内添加点击事件

我们需要用到h函数和customRender

const columns = [
  {
    title: '名称',
    align: 'center',
    dataIndex: 'name',
    customRender: ({ text, record, index }) => {
      const obj = {
        children: h('Button', {
          type: 'text',
          innerText: text,
          class: 'selectData',
          onClick: () => {
          //自行修改
            tableData.value = test(text);
          },
        }),
        props: {} as any,
      };
      return obj;
    },
  },
  ]

//test方法
const test = () => {};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26