vue+Element UI Table表格动态渲染表头内容及操作按钮-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+Element UI Table表格动态渲染表头内容及操作按钮。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

循环表格头信息数组

   <el-table
      v-loading="loading"
      style="width: 100%"
      :data="tableData"
      @selection-change="selectionChange"
      @sort-change="sortChange"
    >
      <el-table-column
        v-for="(item, index) in tableHeaders"
        header-align="center"
        :label="item.label"
        :prop="item.prop"
        :align="item.align"
        :sortable="item.sortable"
        :key="index"
      >
        <template slot-scope="scope">
          <Render
            v-if="item.label == '操作'"
            :scope="scope"
            :render="item.render"
          />
          <span v-else>{{ scope.row[scope.column.property] }}</span>
        </template>
      </el-table-column>
    </el-table>

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

<script>
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) : "";
  },
};
</script>

配置表头信息数组及添加操作事件文章来源地址https://www.toymoban.com/news/detail-541228.html

 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 (
              <div>
                <el-button
                  type="text"
                  onClick={() => {
                    this.edit(scope.row);
                  }}
                >
                  编辑
                </el-button>
                <el-button
                  type="text"
                  style="margin-left:10px"
                  onClick={() => {
                    this.delete(scope.row);
                  }}
                >
                  删除
                </el-button>
                <el-button
                  type="text"
                  style={scope.row.state ? "" : "margin-left:10px;display:none"}
                  onClick={() => {
                    this.delete(scope.row);
                  }}
                >
                  下架
                </el-button>
              </div>
            );
          },
        },
      ],
    };
  },
  methods: {
    edit(row) {
      console.log("edit");
    },
    delete(row) {
      console.log("delete");
    },
  },

到了这里，关于vue+Element UI Table表格动态渲染表头内容及操作按钮的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！