onespot组件文档库

# 基本使用

<template>
  <div class="t-table" style="width:100%;">
    <t-table :table="table" :columns="columns" />
  </div>
</template>

<script>
export default {
  data () {
    let self = this
    return {
      table: {
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            address: '广东省广州市天河区3'
          }
        ]
      },
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100', sort: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true },
        { prop: 'address', label: '地址', minWidth: '220', sort: true, noShowTip: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true },
        {
          prop: 'address', label: '地址', minWidth: '220',
          customRender: {
            comps: [
              {
                comp: 'el-link',
                text: '编辑',
                bind: {
                  type: 'primary'
                },
                event (scope) {
                  return {
                    click () {
                      self.handleEditTable('编辑', scope.row)
                    }
                  }
                }
              },
              {
                comp: 'el-popconfirm',
                bind: {
                  title: '确认删除该条数据？'
                },
                event (scope) {
                  return {
                    confirm () {
                      self.handledeleteTable(scope.row)
                    }
                  }
                },
                child: [
                  {
                    slot: 'reference',
                    comp: 'el-link',
                    text: '删除',
                    bind: {
                      type: 'primary'
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  },
  methods: {
    handleEditTable (val, type) {
      console.log('编辑', val, type)
    },
    handledeleteTable (val) {
      console.log('删除', val)
    }
  }
}
</script>
显示代码

# 双击单元格复制

在组件中需配置

新增isCopy或isCopy='true'属性

<template>
  <div class="t-table" style="width:100%;">
    <t-table :table="table" :columns="columns" isCopy />
  </div>
</template>

<script>
export default {
  data () {
    return {
      table: {
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            address: '广东省广州市天河区3'
          }
        ]
      },
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100', sort: true, noShowColumn: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true, noShowColumn: true },
        { prop: 'address', label: '地址', minWidth: '220', sort: true, noShowColumn: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true, noShowColumn: true },
        { prop: 'address', label: '地址', minWidth: '220', noShowColumn: true }
      ]
    }
  }
}
</script>
显示代码

# 文字变色

在组件中需配置

changeColor对象

<template>
  <div class="t-table" style="width:100%;">
    <t-table :table="table" :columns="columns" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      table: {
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            address: '广东省广州市天河区3'
          }
        ],
        // 状态值为3时，文字变色
        changeColor: { key: 'status', val: '3', txtStyle: '#ef473a' }
      },
      columns: [
          { prop: 'name', label: '姓名', minWidth: '100' , noShowColumn: true },
          { prop: 'date', label: '日期', minWidth: '180' , noShowColumn: true },
          { prop: 'address', label: '地址', minWidth: '220' , noShowColumn: true },
          { prop: 'date', label: '日期', minWidth: '180' , noShowColumn: true },
          { prop: 'address', label: '地址', minWidth: '220' , noShowColumn: true }
        ],
    }
  }
}
</script>
显示代码

# 第一列显示序列号

共 0 条
  • 1
前往
页

在组件中需配置

firstColumn: { type: 'index', label: '序列' }

<template>
  <div class="t-table" style="width:100%;">
    <t-table :table="table" isShowPagination :columns="columns" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      table: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        // 是否显示复选框或序列号
        // firstColumn: { type: 'selection' },
        firstColumn: { type: 'index', label: '序列' },
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            address: '广东省广州市天河区3'
          }
        ]
      },
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100', sort: true, noShowColumn: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true, noShowColumn: true },
        { prop: 'address', label: '地址', minWidth: '220', sort: true, noShowColumn: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true, noShowColumn: true },
        { prop: 'address', label: '地址', minWidth: '220', noShowColumn: true }
      ]
    }
  }
}
</script>
显示代码

# 第一列显示单选项

在组件中需配置

firstColumn: { type: 'radio' }
@radioChange="radioChange"事件传出选中是数据

<template>
  <div class="t-table" style="width:100%;">
    <t-table :table="table" :columns="columns" @radioChange="radioChange" />
  </div>
</template>

<script>
export default {
  name: 'redioDemo',
  data () {
    return {
      table: {
        firstColumn: { type: 'radio' }, // 显示单选框
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '1',
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            address: '广东省广州市天河区3'
          }
        ]
      },
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100' },
        { prop: 'date', label: '日期', minWidth: '180' },
        { prop: 'address', label: '地址', minWidth: '220' },
        { prop: 'date', label: '日期', minWidth: '180' }
      ]
    }
  },
  methods: {
    radioChange (row) {
      console.log('单选传出数据', row)
      // this.baseData.radioVal = this.baseData.table.data.indexOf(row)
      // console.log('单选', row, this.baseData.radioVal)
    },
  }
}
</script>
显示代码

← 分页功能 →