vic-table v0.1.2

vic-table

说明

​ 项目基于vue和element-ui，所以必须在您使用的项目总入口优先导入element-ui才能使用。

​ 别问我为什么写这个项目，我不想码代码，最多写一个对象传递进去，能达到我的目的就可以了，不能再多了，我要节省时间玩游戏享受人生...

​ 我在这个项目里面码那么多字是因为我很多次自己都已经忘记了我对象的结构是怎样的，所以写详细点自己能在以后使用的时候更快回想起来这个祖传代码是怎么用的而不至于总是骂自己。

项目安装

yarn add vic-table

参数详解

1. vdata对象顶级参数，除开以下列出的参数，Element的Table组件的属性值都可以配置在此处，具体参考Element的Table组件

所有表格的事件也直接在vdata属性字段中直接编写，所有表格的方法需要使用ref绑定之后使用vue的ref的对象属性去调用表格的方法

2. vdata.fields属性是表格的列设置，属性字段参考Element-Table组件中的Table-column属性； 新增了vtype属性，可按此属性设置表格字段为Tag|Switch|Icon|Image|Images|A链接； 其tag和switch的点击事件由该列的href、text和change字段映射动作； 新增了expand和hide属性，可设置列在展开信息中进行展示和在默认表格展示中进行列的隐藏；

3. vdata.optBtn.customBtn属性是表格的自定义按钮设置，默认按钮的属性除开isCustomBtn属性，其他参数均可设置 新增了sort属性进行按钮排序，增加show属性进行按钮是否显示的手动判断

使用范例

1. 基础调用，不使用按钮，只用表格展示数据

<template>
  <div id="demo-base">
    <el-button @click="refreshTable"> Refresh Table </el-button>
    <br />
    <br />
    <VicTable
      :vdata="vdata"
      ref="vicTable"
      />
  </div>
</template>

<script>
import VicTable from 'vic-table'

export default {
  name: 'Demo1',
  components: {
    VicTable
  },
  data() {
    return {
      showTable: false,
      vdata: {
        id: 'vicTable1',
        stripe: true, // 斑马条纹
        border: true, // 表格边框
        fields: [ // 表格列数据
          // { prop: 'id', label: 'ID', sortable: false, width: 80 },
          { prop: 'companyText', label: '所属机构', sortable: false, fixed: true },
          { prop: 'pidText', label: '上级', sortable: false },
          { prop: 'rolesText', label: '角色', sortable: false },
          { prop: 'image', label: '头像', sortable: false },
          { prop: 'username', label: '用户名', sortable: true },
          { prop: 'truename', label: '真实姓名', sortable: true },
          { prop: 'nickname', label: '昵称', sortable: true },
          { prop: 'phone', label: '手机号码', sortable: false }
        ],
        opt: false, // 其实如果fields中不存在operation的列，那么opt不设置为false也是不会显示操作按钮的
        datas: [ // 表格数据字段（items|datas|data）
          { id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null },
          { id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00' }
        ]
      }
    }
  },
  methods: {
    refreshTable: function () {
      // this.showTable = !this.showTable
      this.$set(this.vdata, 'loading', true)
      setTimeout(() => {
        this.$set(this.vdata, 'loading', false)
      }, 2000)
    }
  }
}
</script>

<style>
</style>

2. 使用默认按钮的表格

<template>
  <div id="demo-base">
    <el-button @click="refreshTable"> Refresh Table </el-button>
    <br />
    <br />
    <VicTable
      :vdata="vdata"
      ref="vicTable"
      @editModalEvent="editModalEvent"
      @copyModalEvent="copyModalEvent"
      @readModalEvent="readModalEvent"
      @deleteModalEvent="deleteModalEvent"
      @enableModalEvent="enableModalEvent"
      />
  </div>
</template>

<script>
import VicTable from 'vic-table'

export default {
  name: 'Demo2',
  components: {
    VicTable
  },
  data() {
    return {
      showTable: false,
      vdata: {
        id: 'vicTable2',
        stripe: true, // 斑马条纹
        border: true, // 表格边框
        fields: [ // 表格列数据
          // { prop: 'id', label: 'ID', sortable: false, width: 80 },
          { prop: 'companyText', label: '所属机构', sortable: false, fixed: true },
          { prop: 'pidText', label: '上级', sortable: false },
          { prop: 'rolesText', label: '角色', sortable: false },
          { prop: 'image', label: '头像', sortable: false },
          { prop: 'username', label: '用户名', sortable: true },
          { prop: 'truename', label: '真实姓名', sortable: true },
          { prop: 'nickname', label: '昵称', sortable: true },
          { prop: 'phone', label: '手机号码', sortable: false },
          { prop: 'operation', label: '操作', sortable: false, width: '420px' }
        ],
        datas: [ // 表格数据字段（items|datas|data）
          { id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null },
          { id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00' }
        ]
      }
    }
  },
  methods: {
    refreshTable: function () {
      // this.showTable = !this.showTable
      this.$set(this.vdata, 'loading', true)
      setTimeout(() => {
        this.$set(this.vdata, 'loading', false)
      }, 2000)
    },
    editModalEvent: function (item, index, button) {
      console.log(`editModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    copyModalEvent: function (item, index, button) {
      console.log(`copyModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    readModalEvent: function (item, index, button) {
      console.log(`readModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    deleteModalEvent: function (item, index, button) {
      console.log(`deleteModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    enableModalEvent: function (item, index, button) {
      console.log(`enableModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    }
  }
}
</script>

<style>
</style>

3. 修改表格默认按钮+绑定表格事件+表格方法调用示例

<template>
  <div id="demo-base">
    <el-button @click="refreshTable"> Refresh Table </el-button>
    <el-button @click="clearSelected"> Clear Selected </el-button>
    <br />
    <br />
    <VicTable
      :vdata="vdata"
      ref="vicTable"
      @editModalEvent="editModalEvent"
      @copyModalEvent="copyModalEvent"
      @readModalEvent="readModalEvent"
      @deleteModalEvent="deleteModalEvent"
      @enableModalEvent="enableModalEvent"
      />
  </div>
</template>

<script>
import VicTable from 'vic-table'

export default {
  name: 'Demo3',
  components: {
    VicTable
  },
  data() {
    return {
      showTable: false,
      vdata: {
        id: 'vicTable3',
        tableSelect: true, // 是否可勾选表格
        stripe: true, // 斑马条纹
        border: true, // 表格边框
        showSummary: true, // 表尾合计
        rowClassName: ({row, rowIndex}) => { // 表格行状态显示
          return this.tableRowClassName(row, rowIndex)
        },
        selectionChange: (val) => {
          console.log(`selectionChange => `)
          console.log(val)
          this.selectedTableEvent(val)
        },
        // defaultSort: { prop: "truename", order: "desc" },
        fields: [ // 表格列数据
          // { prop: 'id', label: 'ID', sortable: false, width: 80 },
          { prop: 'companyText', label: '所属机构', sortable: false, fixed: true },
          { prop: 'pidText', label: '上级', sortable: false },
          { prop: 'rolesText', label: '角色', sortable: false },
          { prop: 'image', label: '头像', sortable: false },
          { prop: 'username', label: '用户名', sortable: true },
          { prop: 'truename', label: '真实姓名', sortable: true },
          { prop: 'nickname', label: '昵称', sortable: true },
          { prop: 'phone', label: '手机号码', sortable: false },
          { prop: 'operation', label: '操作', sortable: false, width: '420px' }
        ],
        datas: [ // 表格数据字段（items|datas|data）
          { id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null },
          { id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00' }
        ],
        optBtn: {
          edit: { icon: 'el-icon-edit', text: '编辑' },
          copy: { icon: 'el-icon-document-copy', text: '复制' },
          read: { icon: 'el-icon-tickets', text: '读取' },
          delete: { icon: 'el-icon-delete', text: '停用' },
          enable: { icon: 'el-icon-check', text: '启用' }
        }
      }
    }
  },
  methods: {
    refreshTable: function () {
      // this.showTable = !this.showTable
      this.$set(this.vdata, 'loading', true)
      setTimeout(() => {
        this.$set(this.vdata, 'loading', false)
      }, 2000)
    },
    editModalEvent: function (item, index, button) {
      console.log(`editModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    copyModalEvent: function (item, index, button) {
      console.log(`copyModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    readModalEvent: function (item, index, button) {
      console.log(`readModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    deleteModalEvent: function (item, index, button) {
      console.log(`deleteModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    enableModalEvent: function (item, index, button) {
      console.log(`enableModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    selectedTableEvent: function (val) {
      console.log(`selectedTableEvent => `)
      console.log(val)
    },
    // 表格行状态显示
    tableRowClassName: function (row, rowIndex) {
      if (row.deleteTime) {
        return 'warning-row' 
      } else {
        return ''
      }
    },
    clearSelected: function () {
      console.log(`clearSelected => `)
      console.log(this.$refs['vicTable'])
      console.log(this.$refs['vicTable'].$refs['vicTable3'])
      this.$refs['vicTable'].$refs['vicTable3'].clearSelection()
      // this.$refs['vicTable']
    }
  }
}
</script>

<style>
.el-table .warning-row {
  background: #FDE2E2;
}
</style>

4. 自定义表格按钮的示例(新增了多种字段类型和按钮排序)

<template>
  <div id="demo-base">
    <el-button @click="refreshTable"> Refresh Table </el-button>
    <br />
    <br />
    <VicTable
      :vdata="vdata"
      ref="vicTable"
      @editModalEvent="editModalEvent"
      @copyModalEvent="copyModalEvent"
      @readModalEvent="readModalEvent"
      @deleteModalEvent="deleteModalEvent"
      @enableModalEvent="enableModalEvent"
      />
  </div>
</template>

<script>
import VicTable from '../components/VicTable.vue'

export default {
  name: 'Demo4',
  components: {
    VicTable
  },
  data() {
    return {
      showTable: false,
      vdata: {
        id: 'vicTable4',
        stripe: true, // 斑马条纹
        border: true, // 表格边框
        rowIndexShow: true, // 是否显示序号
        rowIndexLabel: '#', // 序号列表头显示文字
        rowIndexWidth: '80px', // 序号列宽度
        delTag: 'deleteTime', // 数据有效性字段（服务器上数据软删除的字段）
        delDesc: true, // 数据有效性字段是否取反（）
        urlPrefix: '', // 表格内图片url地址的前缀，
        imageWidth: '120px', // 表格内单个图片展示的宽度，
        imageHeight: '60px', // 表格内单个图片展示的高度，
        // defaultSort: { prop: "truename", order: "desc" },
        fields: [ // 表格列数据
          // { prop: 'id', label: 'ID', sortable: false, width: 80 },
          { prop: 'companyText', label: '所属机构', sortable: false },
          { prop: 'pidText', label: '上级', sortable: false },
          { prop: 'rolesText', label: '角色', type: 'tag', datas: { '最高管理员': 'success', '管理员': 'warning' }, sortable: false },
          { prop: 'image', label: '头像2', type: 'image', sortable: false },
          { prop: 'username', label: '用户名', sortable: true },
          { prop: 'truename', label: '真实姓名', sortable: true },
          { prop: 'nickname2', label: '昵称头像', type: 'icon', datas: { '剑魔': 'el-icon-s-custom', '教主': 'el-icon-s-flag' }, sortable: false },
          { prop: 'nickname', label: '昵称', sortable: true },
          { prop: 'phone', label: '手机号码', sortable: false },
          { prop: 'linkA', label: '链接A', type: 'a', href: (row, index) => { return this.autoA(row, index) }, sortable: false },
          { prop: 'linkB', label: '链接B', type: 'a', href: (row, index) => { return this.autoB(row, index) }, text: (row, index) => { return this.autoText(row, index) }, sortable: false },
          { prop: 'sex', label: '性别', type: 'switch', change: (row, index, button) => { this.switchAction(row, index, button) }, sortable: false },
          { prop: 'deleteTime', label: '删除时间', sortable: false },
          { prop: 'operation', label: '操作', sortable: false, width: '600px' }
        ],
        datas: [ // 表格数据字段（items|datas|data）
          { id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', nickname2: '剑魔', linkA: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null, sex: true },
          { id: 102, companyText: '总公司', pidText: '无', rolesText: '管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', nickname2: '教主', linkA: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00', sex: false },
          { id: 103, companyText: '总公司', pidText: '无', rolesText: '专员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '专员1', truename: '向问天', nickname: '天王老子', nickname2: '天王老子', linkA: '天王老子', phone: '120', deleteTime: null, deleteSate: '2000-01-01 00:00:00', sex: false }
        ],
        optBtn: {
          edit: { icon: 'el-icon-edit', text: '编辑', sort: 5 },
          copy: { icon: 'el-icon-document-copy', text: '复制', sort: 4 },
          read: { icon: 'el-icon-tickets', text: '读取', sort: 3, show: (button, key, item, index) => { return this.showBtn(button, key, item, index) } },
          delete: { icon: 'el-icon-delete', text: '停用', sort: 2, show: (button, key, item, index) => { return this.showDeleteBtn(button, key, item, index) } },
          enable: { icon: 'el-icon-check', text: '启用', sort: 2, show: (button, key, item, index) => { return this.showEnableBtn(button, key, item, index) } },
          customBtn: { // 自定义按钮
            btn1: {
              isCustomBtn: true, // 设置为自定义按钮才能正常显示出来
              type: 'info', // 按钮的类型，同element-ui的按钮type
              icon: '', // 按钮的icon图标
              class: 'info', // 按钮的class样式
              text: 'Btn1', // 按钮显示的文字
              sort: 1,
              click: (item, index, button) => { // 按钮的点击事件动作
                this.clickBtn1(item, index, button)
              }
            },
            btn2: {
              isCustomBtn: true,
              // type: 'danger',
              // icon: '',
              // class: 'danger',
              text: 'Btn2',
              sort: 0,
              click: (item, index, button) => {
                this.clickBtn2(item, index, button)
              }
            }
          }
        }
      }
    }
  },
  methods: {
    refreshTable: function () {
      // this.showTable = !this.showTable
      this.$set(this.vdata, 'loading', true)
      setTimeout(() => {
        this.$set(this.vdata, 'loading', false)
      }, 2000)
    },
    editModalEvent: function (item, index, button) {
      console.log(`editModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    copyModalEvent: function (item, index, button) {
      console.log(`copyModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    readModalEvent: function (item, index, button) {
      console.log(`readModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    deleteModalEvent: function (item, index, button) {
      console.log(`deleteModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    enableModalEvent: function (item, index, button) {
      console.log(`enableModalEvent => `)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    clickBtn1: function (item, index, button) {
      console.log(`click btn1`)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    clickBtn2: function (item, index, button) {
      console.log(`click btn2`)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    switchAction: function (item, index, button) {
      console.log(`switchAction`)
      console.log(item)
      console.log(index)
      console.log(button)
    },
    autoA: function (row, index) {
      return typeof row.image === 'object' ? row.image[0] : row.image
    },
    autoB: function (row, index) {
      return `news/${row.id}`
    },
    autoText: function (row, index) {
      return `查看${row.rolesText}`
    },
    showBtn: function (button, key, item, index) {
      let result = true
      if (index === 1 || item.id === 103) {
        result = false
      }
      return result
    },
    showDeleteBtn: function (button, key, item, index) {
      let result = false
      if (item.deleteTime === null) {
        result = true
      } else {
        result = false
      }
      if (index === 1) {
        result = false
      }
      return result
    },
    showEnableBtn: function (button, key, item, index) {
      let result = false
      if (item.deleteTime === null) {
        result = false
      } else {
        result = true
      }
      if (index === 1 || item.id === 103) {
        result = true
      }
      return result
    }
  }
}
</script>

<style>
</style>

5. 表格展开的示例(新增了展开标记和列隐藏标记)

<template>
  <div id="demo-base">
    <el-button @click="refreshTable"> Refresh Table </el-button>
    <br />
    <br />
    <VicTable
      :vdata="vdata"
      ref="vicTable"
      />
  </div>
</template>

<script>
import VicTable from '../components/VicTable.vue'

export default {
  name: 'Demo1',
  components: {
    VicTable
  },
  data() {
    return {
      showTable: false,
      vdata: {
        id: 'vicTable5',
        stripe: true, // 斑马条纹
        border: true, // 表格边框
        tableSelect: true, // 是否可勾选表格
        rowIndexShow: true, // 表格序号
        rowExpandShow: true, // 表格展开 -- 新增标记
        expandClass: 'vic-table-expand', // 表格展开列的class类名
        fields: [ // 表格列数据
          // { prop: 'id', label: 'ID', sortable: false, width: 80 },
          { prop: 'companyText', label: '所属机构', expand: true, sortable: false, fixed: true },
          { prop: 'pidText', label: '上级', expand: true, sortable: false },
          { prop: 'rolesText', label: '角色', expand: true, sortable: false },
          { prop: 'image', label: '头像', sortable: false },
          { prop: 'username', label: '用户名', expand: true, sortable: true },
          { prop: 'truename', label: '真实姓名', expand: true, sortable: true },
          { prop: 'nickname', label: '昵称', expand: true, sortable: true },
          { prop: 'phone', label: '手机号码', expand: true, sortable: false },
          { prop: 'updateTime', label: '更新时间', expand: true, hide: true }, // 新增expand标记和hide标记
          { prop: 'deleteTime', label: '删除时间', expand: true, hide: true } // 新增expand标记和hide标记
        ],
        opt: false, // 其实如果fields中不存在operation的列，那么opt不设置为false也是不会显示操作按钮的
        datas: [ // 表格数据字段（items|datas|data）
          // { id: 1, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=4', username: '管理员', truename: '西方求败', nickname: '剑魔', phone: '110' }
          { id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', updateTime: '2024-01-01 00:00:00', deleteTime: '2024-03-08 00:00:00', deleteSate: null },
          { id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', updateTime: '2024-02-02 00:00:00', deleteTime: null, deleteSate: '2024-03-10 00:00:00' }
        ]
      }
    }
  },
  methods: {
    refreshTable: function () {
      // this.showTable = !this.showTable
      this.$set(this.vdata, 'loading', true)
      setTimeout(() => {
        this.$set(this.vdata, 'loading', false)
      }, 2000)
    }
  }
}
</script>

<style>
.vic-table-expand {
  font-size: 0;
}
.vic-table-expand label {
  width: 120px;
  color: #99a9bf;
  font-size: 12px;
  line-height: 20px;
}
.vic-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 30%;
  line-height: 20px;
}
.vic-table-expand .el-form-item__content {
  font-size: 12px;
  line-height: 20px;
}
</style>

本项目

• NPM

依赖项目

• Vue
• Element-UI