vue+Element UI Table表格动态渲染表头内容及操作按钮

循环表格头信息数组

   
      
        
          
          {{ scope.row[scope.column.property] }}

封装操作组件并引入表格文件内

export default {
  name: "LbRender",
  functional: true,
  props: {
    scope: Object,
    render: Function,
  },
  render: (h, ctx) => {
    return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : "";
  },
};

配置表头信息数组及添加操作事件

 data() {
    return {
      tableHeaders: [
        { label: "商品名称", prop: "name", width: "380", align: "center" },
        {
          label: "价格(元)",
          prop: "a",
          width: "160",
          align: "center",
          sortable: true,
        },
        {
          label: "总库存",
          prop: "b",
          width: "260",
          align: "center",
          sortable: true,
        },
        {
          label: "销量",
          prop: "c",
          width: "160",
          align: "center",
          sortable: true,
        },
        {
          label: "是否上架",
          prop: "d",
          width: "160",
          align: "center",
        },
        { label: "操作结果", prop: "e", width: "160", align: "center" },
        { label: "审核", prop: "f", width: "160", align: "center" },
        {
          label: "操作",
          prop: "address",
          width: "160",
          align: "center",
          sortable: true,
          render: (h, scope) => {
            return (
              
                 {
                    this.edit(scope.row);
                  }}
                >
                  编辑
                
                 {
                    this.delete(scope.row);
                  }}
                >
                  删除
                
                 {
                    this.delete(scope.row);
                  }}
                >
                  下架
                
              
            );
          },
        },
      ],
    };
  },
  methods: {
    edit(row) {
      console.log("edit");
    },
    delete(row) {
      console.log("delete");
    },
  },

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/db0b2963ab.html