自定义表格设置

标签：fixed 自定义 表格 columnListOperate prop JSON 设置 label row

实现功能

 

 

 使用方法：

# 实现功能：
1：支持锁定表格列
2：支持新增和增减表格列
3：实现拖拽排序

# 使用方法
一：页面导入
import GtableSetting from "@/components/GtableSetting";

components: {
    GtableSetting,
  },
二：页面使用
<GtableSetting
      :columnList.sync="columnList"
      :noColumnList.sync="noColumnList"
      :visible.sync="dialogVisible"
      @submitPopupData="submitPopupData"
    >
</GtableSetting>

# 传递参数
columnList -->已选择字段类型
noColumnList-->未选字段
dialogVisible-->弹框显示隐藏
submitPopupData-->确定按钮的点击事件

# 已选字段和未选字段的数据类型
noColumnList: [
{
    label: "更新时间",
    prop: "updateTime",
    sortable: true,
    fixed: null,
},
{ label: "更新者", prop: "updateBy", sortable: false, fixed: null },
{ label: "公告id", prop: "noticeId", sortable: false, fixed: null },
],


# submitPopupData事件（将更新的columnList和noColumnList传递给父组件）
      this.$emit(
        "submitPopupData",
        this.columnListOperate,
        this.noColumnListOperate
      );
      

父页面：

 <el-table       v-loading="loading"       :data="noticeList"       @selection-change="handleSelectionChange"       style="width: 100%"     >       <el-table-column type="selection" width="55" align="center" fixed />       <el-table-column         label="序号"         align="center"         prop="noticeId"         width="80"         fixed       /> 　　　　注意可配置的表头在columnList中       <el-table-column         v-for="(item, index) in columnList"         :key="index"         :label="item.label"         :prop="item.prop"         :sortable="item.sortable"         :show-overflow-tooltip="true"         :fixed="item.fixed"         align="center"       > 　　　　需要判断的数据在插槽中         <template slot-scope="scope">           <!-- 公告类型 -->           <span v-if="item.prop == 'noticeType'">             {{ typeFormat(scope.row) }}           </span>           <!-- 状态 -->           <span v-else-if="item.prop == 'status'">             {{ statusFormat(scope.row) }}           </span>           <!-- 创建时间 -->           <span v-else-if="item.prop == 'createTime'">             {{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}           </span>           <span v-else>{{ scope.row[item.prop] }}</span>         </template>       </el-table-column>
      <el-table-column         label="操作"         align="center"         class-name="small-padding fixed-width"       >         <template slot-scope="scope">           <el-button             size="mini"             type="text"             icon="el-icon-edit"             @click="handleUpdate(scope.row)"             v-hasPermi="['system:notice:edit']"             >修改</el-button           >           <el-button             size="mini"             type="text"             icon="el-icon-delete"             @click="handleDelete(scope.row)"             v-hasPermi="['system:notice:remove']"             >删除</el-button           >         </template>       </el-table-column>     </el-table>

页面导入

import GtableSetting from "@/components/GtableSetting";

components: {
    GtableSetting,
  },

组件

<GtableSetting
      :columnList.sync="columnList"
      :noColumnList.sync="noColumnList"
      :visible.sync="dialogVisible"
      @submitPopupData="submitPopupData"
    >

data

      columnList: [
        {
          label: "公告标题",
          prop: "noticeTitle",
          sortable: false,
          fixed: null,
        },
        {
          label: "公告类型",
          prop: "noticeType",
          sortable: false,
          fixed: null,
        },
        { label: "状态", prop: "status", sortable: false, fixed: null },
        { label: "创建者", prop: "createBy", sortable: false, fixed: null },
        {
          label: "创建时间",
          prop: "createTime",
          sortable: true,
          fixed: null,
        },
      ],
      noColumnList: [
        {
          label: "更新时间",
          prop: "updateTime",
          sortable: true,
          fixed: null,
        },
        { label: "更新者", prop: "updateBy", sortable: false, fixed: null },
        { label: "公告id", prop: "noticeId", sortable: false, fixed: null },
      ],

方法：

  submitPopupData(val1, val2) {
      this.columnList = JSON.parse(JSON.stringify(val1));
      this.noColumnList = JSON.parse(JSON.stringify(val2));
      this.dialogVisible = false;
    },

子组件

 

<template>
  <div>
    <el-dialog
      title="表格相关设置"
      :visible.sync="visible"
      width="40%"
      :before-close="closeTabelSet"
    >
      <div class="dialogBox">
        <div class="dialogHead">
          锁定前&nbsp;&nbsp;&nbsp;&nbsp;<el-input
            style="display: inline-block; width: 80px"
            v-model="lineColum"
          ></el-input
          >&nbsp;&nbsp;&nbsp;&nbsp;列
        </div>
        <div class="dialogCont">
          <p class="dcP">
            已选择字段（可以拖动排序）（已选择{{ columnListOperate.length }}/{{
              columnListOperate.length + noColumnListOperate.length
            }}字段）
          </p>
          <ul class="dcUl">
            <draggable
              v-model="columnListOperate"
              group="people"
              @change="change"
              @start="start"
              @end="end"
            >
              <li v-for="(item, index) in columnListOperate" :key="index">
                {{ item.label }}
                <i class="el-icon-close" @click="delCol(item)"></i>
              </li>
            </draggable>
          </ul>
        </div>
        <div class="dialogCont">
          <p class="dcP">未选字段</p>
          <ul class="dcUl">
            <li
              v-for="(item, index) in noColumnListOperate"
              :key="index"
              class="dcUlLi"
            >
              {{ item.label }}
              <span class="cover" @click="addColumn(item)"
                ><i class="el-icon-plus"></i> 添加</span
              >
            </li>
          </ul>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeTabelSet">取 消</el-button>
        <el-button type="primary" @click="sureTableSet">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

 <script>
import draggable from "vuedraggable";
export default {
  props: {
    columnList: {
      type: Array,
      required: true,
    },
    noColumnList: {
      type: Array,
      required: true,
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columnListOperate: [],
      noColumnListOperate: [],
      lineColum: "",
    };
  },
  components: {
    draggable,
  },
  created() {
    this.columnListOperate = JSON.parse(JSON.stringify(this.columnList));
    this.noColumnListOperate = JSON.parse(JSON.stringify(this.noColumnList));
  },
  methods: {
    // 监听拖拽
    change(event) {
      console.log(event);
    },
    // 开始拖拽
    start(event) {
      console.log(event);
    },
    // 结束拖拽
    end(event) {
      console.log(event);
    },
    // 取消设置表格
    closeTabelSet() {
      this.lineColum = "";
      this.columnListOperate = JSON.parse(JSON.stringify(this.columnList));
      this.noColumnListOperate = JSON.parse(JSON.stringify(this.noColumnList));
      this.$emit("update:visible", false);
    },
    // 删除已选字段item
    delCol(row) {
      this.columnListOperate.splice(
        this.columnListOperate.findIndex((item) => item.label === row.label),
        1
      );
      this.noColumnListOperate.push(row);
    },
    // 添加已选字段item
    addColumn(row) {
      this.noColumnListOperate.splice(
        this.noColumnListOperate.findIndex((item) => item.label === row.label),
        1
      );
      this.columnListOperate.push(row);
    },
    // 确定设置
    sureTableSet() {
      // 锁定前几列
      for (let i = 0; i < this.columnListOperate.length; i++) {
        if (i < this.lineColum) {
          this.columnListOperate[i].fixed = true;
        }
      }
      this.$emit(
        "submitPopupData",
        this.columnListOperate,
        this.noColumnListOperate
      );
    },
  },
};
</script>

<style scoped lang="scss">
.dialogBox {
  width: 100%;
  overflow: hidden;
  .dialogHead {
    width: 100%;
    overflow: hidden;
    line-height: 30px;
    margin-bottom: 10px;
  }
}
.dialogCont {
  width: 100%;
  overflow: hidden;
  p.dcP {
    width: 100%;
    overflow: hidden;
    height: 32px;
    line-height: 32px;
    background: #ececec;
    padding: 0px 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .dcUl {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      border: solid 1px #1890ff;
      margin-right: 10px;
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
      margin-bottom: 10px;
      width: 100px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      overflow: hidden;
      position: relative;
    }
    li.dcUlLi {
      color: #606266;
      border-color: #606266;
    }
    /* 写好遮罩层样式,并且让它先不显示 */
    span.cover {
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      text-align: center;
      position: absolute;
      color: #fff;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0%;
    }

    /* 鼠标hover,显示遮罩,设置过渡时间 */
    .cover:hover {
      transition: all 1s;
      width: 100%;
      height: 100%;
      opacity: 1;
    }
  }
}
</style>

 

标签：fixed,自定义,表格,columnListOperate,prop,JSON,设置,label,row
From： https://www.cnblogs.com/guohanting/p/16790716.html