成功动态显示某表字段列表、选择字段、设置字段属性

<template>
  <div class="app-container">
    <!--工具条-->
    <div class="toolbar" style="padding-bottom: 0px; height: 48px">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="TableNameS" placeholder="表名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="fetchData">查询字段</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
    >
      <el-table-column
        prop="name"
        label="字段名称"
        align="center"
        width="100px"
      >
        <template scope="scope">
          <el-input
            size="mini"
            v-model="scope.row.name"
            style="width: 100px"
          ></el-input>
        </template>
      </el-table-column>
       <el-table-column
        prop="label"
        label="字段标题"
        align="center"
        width="100px"
      >
        <template scope="scope">
          <el-input
            size="mini"
            v-model="scope.row.label"
            style="width: 100px"
          ></el-input>
        </template>
      </el-table-column>
       <el-table-column
        prop="width"
        label="字段宽度"
        align="center"
        width="100px"
      >
        <template scope="scope">
          <el-input
            size="mini"
            v-model="scope.row.width"
            style="width: 100px"
          ></el-input>
        </template>
      </el-table-column>
       <el-table-column
        type="selection"
        :reserve-selection="true"
        prop="name"
        align="center"
        width="80"
      ></el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[5, 10, 20, 100]"
      :page-size="pageSize"
      :total="list.length"
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      style="text-align: center; margin-top: 1%"
    ></el-pagination>
    <el-button type="success" @click="getchecks()">获取选择</el-button>
     <el-button type="success" @click="AddBatch()">保存</el-button>
  </div>
</template>

<script>
import { getList, remove, GetColumnName2 } from "@/api/test";
export default {
  filters: {},
  data() {
    return {
      list: [],
      listLoading: false,
      TableNameS: "",
      pageSize: 20,
      currentPage: 1,
      ids: [], // 保存id
    };
  },
  created() {},
  methods: {
    getchecks() {
      let arr = this.ids;
      let column_link="";
      arr.forEach(function (item, index) {
        column_link+=item+",";
        console.log(item);
      });
    },
    // 复选框
    handleSelectionChange(val) {
      this.ids = [];
      val.forEach((ele) => {
        this.ids.push(ele.name);
      });
    },
    fetchData() {
      this.listLoading = true;
      let param = { TableName: this.TableNameS };
      GetColumnName2(param).then((response) => {
        this.list = response.Data;
        this.listLoading = false;
        this.currentPage = 1;
      });
    },

modifyData(rowData) {
      this.$router.push("/test_modify?id=" + rowData.ID);
    },
    checkDetail(rowData) {
      this.$router.push("/test_detail?id=" + rowData.ID);
    },
    handleCurrentChange: function (cpage) {
      this.$data.currentPage = cpage;
    },
    handleSizeChange: function (psize) {
      this.$data.pageSize = psize;
    },
    AddBatch() {
      //代表通过验证 ,将参数传回后台
      let params = this.list;
      debugger;
    //   AddBatch(params).then((res) => {
    //     this.$message({
    //       type: "info",
    //       message: res.Message,
    //     });
    //     if (res.Code == 702) {
    //       return;
    //     }
    //   });
     },
  },
};
</script>