btable-br v0.2.5

基于antd表格组件 支持列宽拖拽 列别名 列隐藏等

UI使用了 Ant Design Vue

拖拽是使用了vue-draggable-resizable 以及vuedraggable 进行实现

1.使用方式

• 执行 npm install --save btable-br
• 在mian.js 进行引入 同时引入css

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Btable from 'btable-br'
import 'btable-br/btable-br.css'
Vue.config.productionTip = false
Vue.use(Btable)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.页面使用

<template>
  <Btable/>
</template>

• 参数说明
• 支持所有的 antd表格api 具体antd版本为 1.7.4 文档参考1.7.8

3.插槽使用

<!-- 父组件插槽使用 -->
    //表格内部
      <template v-slot:isCharge="{ record }">
        <a-tooltip :title="record['isCharge']">
          <a-switch size="small" v-model.number="record['isCharge']" />
        </a-tooltip>
      </template>
      //isCharge 为列中绑定的dataIndex 字段名称
      
      表格头部左上角位置插件使用
      
    <template slot="left">
        <a-switch> </a-switch>
    </template>

4.参数说明

• 原本columns 属性是具体的列设置 但columns必须传入row中
• isSum 传入 true 表示需要计算

• 基于antd表格组件 支持列宽拖拽 列别名 列隐藏等

UI使用了 Ant Design Vue

拖拽是使用了vue-draggable-resizable 以及vuedraggable 进行实现

1.使用方式

• 执行 npm install --save btable-br
• 在mian.js 进行引入 同时引入css

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Btable from 'btable-br'
import 'btable-br/btable-br.css'
Vue.config.productionTip = false
Vue.use(Btable)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

2.页面使用

<template>
  <Btable/>
</template>

• 参数说明
• 支持所有的 antd表格api 具体antd版本为 1.7.4 文档参考1.7.8

3.插槽使用

<!-- 父组件插槽使用 -->
    //表格内部
      <template v-slot:isCharge="{ record }">
        <a-tooltip :title="record['isCharge']">
          <a-switch size="small" v-model.number="record['isCharge']" />
        </a-tooltip>
      </template>
      //isCharge 为列中绑定的dataIndex 字段名称
      
      表格头部左上角位置插件使用
      
    <template slot="left">
        <a-switch> </a-switch>
    </template>

4.参数说明

• 原本columns 属性是具体的列设置 但columns必须传入row中
• isSum 传入 true 表示需要计算
• bulkEditing 传入 true 表示从批改 下拉中过滤出来

reload

// 默认  刷新 行高 列设置 列别名 全屏 批改
["reload", "colheight", "setting", "colalias", "resize","bulkEditing"]

rowEvens

   rowEvens: {
   //传入使用传入的 不传入使用组件自带
   //当前自带鼠标右击事件
        click: (event) => { 
          console.log(event);
        }, // 点击行
      },

contextList

// 默认 内部使用key进行判断可以单独传递对应的key使用单独事件
[ 
   {
    key: "0",
    title: "复制行数据",
    fun: (args) => {},
  },
  {
    key: "1",
    title: "删除行",
    fun: (args) => {},
  },
  {
    key: "2",
    title: "在上新增",
    fun: (args) => {},
  },
  {
    key: "3",
    title: "在下新增",
    fun: (args) => {},
  },
  {
    key: "4",
    title: "复制当前行",
    fun: (args) => {},
  },
]
  //或者直接修改菜单名称
  ['复制行数据','删除行','在上新增','在下新增','复制当前行']
  
  // fun 传递当前菜单点击的处理事件  需和isOpenMenu配合使用
  // 当不传递 fun 参数时候 可以使用 menuHandle事件 进行监听返回值

不使用右击菜单需传

    <Btable
      :rowEvens="{ contextmenu: () => {} }"
      :isOpenMenu="false"
    >

5.事件说明

6.代码示例

<template>
  <div class="home">
    <Btable
      :dataSource="list"
      :row="columns"
      @reload="reload"
      :rowKey="(row) => row.id"
      @paste="paste"
      tabName="test"
      size="small"
      @behindAdd="behindAdd"
      @beforeAdd="beforeAdd"
      @menuHandle="menuHandle"
      :isOpenMenu="false"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <!-- 父组件插槽使用 -->
      <template v-slot:isCharge="{ record }">
        <a-tooltip :title="record['isCharge']">
          <a-switch size="small" v-model.number="record['isCharge']" />
        </a-tooltip>
      </template>

      <template v-slot:share="{ record }">
        <a-tooltip :title="record['share']">
          <a-input size="small" v-model.number="record['share']" />
        </a-tooltip>
      </template>
    </Btable>
  </div>
</template>

<script>
// v-slot:isCharge 名称需要在 columns内的 scopedSlots 进行配置
import Btable from "../components/Btable/index.vue";
let columns = [
  {
    title: "人员名称",
    dataIndex: "userName",
    ellipsis: true,
    width: 110,
    sorter: (a, b) => a.userName.length - b.userName.length,
    
  },
  {
    title: "分成比例%",
    dataIndex: "share",
    ellipsis: true,
    scopedSlots: { customRender: "share" },
    width: 110,
    isSum:true
  },
  {
    title: "是否负责人",
    dataIndex: "isCharge",
    ellipsis: true,
    scopedSlots: { customRender: "isCharge" },
    width: 110,
    filters: [
      {
        text: "是",
        value: "true",
      },
      {
        text: "否",
        value: "",
      },
    ],
    onFilter: (value, record) => record.isCharge === Boolean(value),
  },
];

export default {
  name: "Home",
  components: {
    Btable,
  },

  data() {
    return {
      selectedRowKeys: [],
      list: [
        {
          id: "001",
          isCharge: false,
          share: "2000",
          userName: "test",
        },
        {
          id: "002",
          isCharge: false,
          share: "100",
          userName: "te55st",
        },
      ],
      columns,
      // rowEvens: {
      //   click: (event) => {
      //     console.log(event);
      //   }, // 点击行
      // },
      // tabSize: "small",
    };
  },
  watch: {
    list: {
      handler(v) {
        console.log(v);
      },
      deep: true,
    },
  },
  methods: {
    onSelectChange(a) {
      this.selectedRowKeys = a;
    },
    menuHandle(e, v) {
      console.log(e);
      console.log(v);
    },
    beforeAdd(id) {
      this.list.forEach((k) => {
        if (k.id === id) {
          k.userName = "前添加";
        }
      });
    },
    behindAdd(id) {
      this.list.forEach((k) => {
        if (k.id === id) {
          k.userName = "后添加";
        }
      });
    },
    // 重新请求接口
    reload() {
      console.log("重新请求接口");
    },
    // 设置整个组件的大小
    setSize(key) {
      // this.tabSize = key;
    },
    // 粘贴到表格内的值 只处理了列的值
    paste(arr) {
      console.log(arr);
      this.list.forEach((k, i) => {
        k.share = arr[i];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 50%;
  height: 50%;
}
</style>

7.项目地址

reload

// 默认  刷新 行高 列设置 列别名 全屏 批改
["reload", "colheight", "setting", "colalias", "resize","batch"]

rowEvens

   rowEvens: {
   //传入使用传入的 不传入使用组件自带
   //当前自带鼠标右击事件
        click: (event) => { 
          console.log(event);
        }, // 点击行
      },

contextList

// 默认 内部使用key进行判断可以单独传递对应的key使用单独事件
[ 
   {
    key: "0",
    title: "复制行数据",
    fun: (args) => {},
  },
  {
    key: "1",
    title: "删除行",
    fun: (args) => {},
  },
  {
    key: "2",
    title: "在上新增",
    fun: (args) => {},
  },
  {
    key: "3",
    title: "在下新增",
    fun: (args) => {},
  },
  {
    key: "4",
    title: "复制当前行",
    fun: (args) => {},
  },
]
  //或者直接修改菜单名称
  ['复制行数据','删除行','在上新增','在下新增','复制当前行']
  
  // fun 传递当前菜单点击的处理事件  需和isOpenMenu配合使用
  // 当不传递 fun 参数时候 可以使用 menuHandle事件 进行监听返回值

不使用右击菜单需传

    <Btable
      :rowEvens="{ contextmenu: () => {} }"
      :isOpenMenu="false"
    >

5.事件说明

6.代码示例

<template>
  <div class="home">
    <Btable
      :dataSource="list"
      :row="columns"
      @reload="reload"
      :rowKey="(row) => row.id"
      @paste="paste"
      tabName="test"
      size="small"
      @behindAdd="behindAdd"
      @beforeAdd="beforeAdd"
      @menuHandle="menuHandle"
      :isOpenMenu="false"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <!-- 父组件插槽使用 -->
      <template v-slot:isCharge="{ record }">
        <a-tooltip :title="record['isCharge']">
          <a-switch size="small" v-model.number="record['isCharge']" />
        </a-tooltip>
      </template>

      <template v-slot:share="{ record }">
        <a-tooltip :title="record['share']">
          <a-input size="small" v-model.number="record['share']" />
        </a-tooltip>
      </template>
    </Btable>
  </div>
</template>

<script>
// v-slot:isCharge 名称需要在 columns内的 scopedSlots 进行配置
import Btable from "../components/Btable/index.vue";
let columns = [
  {
    title: "人员名称",
    dataIndex: "userName",
    ellipsis: true,
    width: 110,
    sorter: (a, b) => a.userName.length - b.userName.length,
    
  },
  {
    title: "分成比例%",
    dataIndex: "share",
    ellipsis: true,
    scopedSlots: { customRender: "share" },
    width: 110,
    isSum:true
  },
  {
    title: "是否负责人",
    dataIndex: "isCharge",
    ellipsis: true,
    scopedSlots: { customRender: "isCharge" },
    width: 110,
    filters: [
      {
        text: "是",
        value: "true",
      },
      {
        text: "否",
        value: "",
      },
    ],
    onFilter: (value, record) => record.isCharge === Boolean(value),
  },
];

export default {
  name: "Home",
  components: {
    Btable,
  },

  data() {
    return {
      selectedRowKeys: [],
      list: [
        {
          id: "001",
          isCharge: false,
          share: "2000",
          userName: "test",
        },
        {
          id: "002",
          isCharge: false,
          share: "100",
          userName: "te55st",
        },
      ],
      columns,
      // rowEvens: {
      //   click: (event) => {
      //     console.log(event);
      //   }, // 点击行
      // },
      // tabSize: "small",
    };
  },
  watch: {
    list: {
      handler(v) {
        console.log(v);
      },
      deep: true,
    },
  },
  methods: {
    onSelectChange(a) {
      this.selectedRowKeys = a;
    },
    menuHandle(e, v) {
      console.log(e);
      console.log(v);
    },
    beforeAdd(id) {
      this.list.forEach((k) => {
        if (k.id === id) {
          k.userName = "前添加";
        }
      });
    },
    behindAdd(id) {
      this.list.forEach((k) => {
        if (k.id === id) {
          k.userName = "后添加";
        }
      });
    },
    // 重新请求接口
    reload() {
      console.log("重新请求接口");
    },
    // 设置整个组件的大小
    setSize(key) {
      // this.tabSize = key;
    },
    // 粘贴到表格内的值 只处理了列的值
    paste(arr) {
      console.log(arr);
      this.list.forEach((k, i) => {
        k.share = arr[i];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 50%;
  height: 50%;
}
</style>

7.项目地址