＜table＞标签---自定义动态渲染

最新推荐文章于 2024-05-30 15:07:12 发布

万物皆可卷

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量375

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Dipper_Dubhe/article/details/125597379

版权

table组件

自定义动态渲染

      <Table
        border
        //列的内容
        :columns="roleColum"
        //数据
        :data="divisionData"
        //没有数据的时候显示的文字
        :no-data-text="noDataTips"
      ></Table>

divisionData:[], 
noDataTips:"暂无数据"   
roleColum: [
        {
          title: "下发",
            //多选框
          type: "selection",
          align: "center",
          width: 60,
          fixed: "left",
        },
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 60,
          fixed: "left",
        }
        {
          title: "基本信息",
          align: "center",
    //children里面还可以包children
          children: [
            { title: "姓名", key: "name", width: 100, align: "center" },
 			children: [{}]
          ],
        },
            
        {
          title: "操作",
          align: "center",
          fixed: "right",
          width: 160,
      //自定义
          render: (h, params) => {
            let btnEdit = h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small",
                  icon: "md-checkmark",
                },
                style: {
                  marginTop: "5px",
                  marginRight: "5px",
                },
                on: {
                  click: () => {
                    this.handleEdit(params.row);
                  },
                },
              },
              "编辑"
            );
     //可以有多个，最后要reture出去
           return h("div", [btnDelete]);
          },
        },
      ],