Tui基础组件文档库

# 基本使用

此排序仅可点击图标才生效
<template>
  <t-layout-page class="row_class_name">
    <t-layout-page-item>
      <t-table
        onlyIconSort
        title="此排序仅可点击图标才生效"
        :table="table"
        :columns="columns"
        :header-cell-style="{background: 'red',height: '50px'}"
        :row-style="{ height: '52px'}"
        size="mini"
        :rowClassName="rowClassName"
      />
    </t-layout-page-item>
  </t-layout-page>
</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);
    },
    rowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row"
      } else {
        return "success-row"
      }
    },
  },
};
</script>
<style lang="scss">
.row_class_name {
  .el-table .warning-row {
    color: #b88230;
  }
  .el-table .success-row {
    color: #67c23a;
  }
}
</style>
显示代码

# 双击单元格复制

在组件中需配置

新增isCopy或isCopy='true'属性

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table :table="table" :columns="columns" isCopy />
    </t-layout-page-item>
  </t-layout-page>
</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'
          },
          {
            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, allShow: true },
        { prop: 'date', label: '日期', minWidth: '180', sort: true },
        { prop: 'address', label: '地址', minWidth: '220' }
      ]
    }
  }
}
</script>
显示代码

# 文字变色

在组件中需配置

changeColor对象

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-table :table="table" :columns="columns" />
    </t-layout-page-item>
  </t-layout-page>
</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>
显示代码

← 序列号显示 →