关于antd vue 中table的customCell用法

最新推荐文章于 2024-09-23 11:09:04 发布

故人两相忘

最新推荐文章于 2024-09-23 11:09:04 发布

阅读量8.8k

点赞数 5

分类专栏： antd vue 文章标签： vue 前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/ningeryt/article/details/115731106

版权

antd vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Ant Design Vue (antdvue) 中使用customCell方法实现表格单元格点击时弹出对话框，包括自定义渲染和添加点击事件。通过实例演示了如何设置样式和触发事件，适合前端开发者学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

antd vue

需求是table的单元格单击时，弹出弹窗
比如，单击测试时，弹出一个弹窗

序号	编码	名称
1	001	测试

customCell

script部分
...
columns: [
{
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '编码',
            align: "center",
            dataIndex: 'bm'
          },
          {
            title: '名称',
            align: "center",
            dataIndex: 'name',
            customCell: this.render  //此处添加方法
          },
],

然后去methods里，定义这样一个方法

render(record) {
        return {
          style: {
            'color': 'blue', //这里将名称变了下色
          },
          on: {
            click: () => { //点击事件，也可以加其他事件
              this.$refs.mymodal.add(record);
            }
          }
        }
      },