Ant Design Vue中的Table和Tag的基础应用

目录

一、Table表格

1.1、显示表格

1.2、列内容过长省略展示

1.3、完整分页

1.4、表头列颜色设置

二、Tag标签

2.1、根据条件显示不同颜色

2.2、控制关闭事件

一、Table表格

效果展示：

官网：Ant Design Vue

1.1、显示表格

    <a-table
      ref="table"
      size="middle"
      :scroll="{ x: true }"
      bordered
      rowKey="recordId"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      class="j-table-force-nowrap"
    >
      <!-- <span slot="num" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span> -->
      <!-- 性别处理 -->
      <span slot="sex" slot-scope="text">
        <a-tag :color="text == 2 ? 'red' : 'green'">
          {{ text == 2 ? '男' : '女' }}
        </a-tag>
      </span>
      <!-- 时长处理 -->
      <span slot="duration" slot-scope="text">
        {{ text == '0' ? '-' : text }}
      </span>
      <!-- 图片列表 -->
      <template slot="imgSlot" slot-scope="text">
        <div class="img-list">
          <img
            v-for="(item, index) in displayedValues(text)"
            :key="index"
            @click="handlePreview(item, index, text)"
            :src="avatarSrc(item)"
            height="30px"
            style="width: 30px; margin-right: 8px"
          />
          <a-icon
            type="caret-down"
            style="font-size: 34px; color: #3489f9"
            v-if="text.length > 3"
            @click="resourceList(text)"
          />
        </div>
      </template>
      <!-- 视频列表 -->
      <template slot="videoSlot" slot-scope="text">
        <span v-if="text && text.length == 0" style="font-size: 12px; font-style: italic">无视频</span>
        <div class="img-list" v-else>
          <div
            style="position: relative; width: 30px; height: 30px; margin-right: 8px"
            v-for="(item, index) in displayedValues(text)"
            :key="index"
          >
            <video
              :src="avatarSrc(item)"
              controls
              height="30px"
              style="width: 100%; height: 100%; position: absolute; top: 0; left: 0"
            ></video>
            <div
              style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer"
              @click="handlePreview(item, index, text)"
            ></div>
          </div>
          <a-icon
            type="caret-down"
            style="font-size: 34px; color: #3489f9"
            v-if="text.length > 3"
            @click="resourceList(text)"
          />
        </div>
      </template>
      <!-- 状态处理 -->
      <span slot="rejectStatus">
        <span style="color: red">已驳回</span>
      </span>
      <!-- 表格操作-->
      <span slot="action" slot-scope="text, record">
        <a @click="rejectedConfirmation(record)">驳回</a>
      </span>
    </a-table>

1.2、列内容过长省略展示

<script>
  data() {
    return {
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '学生姓名',
          align: 'center',
          dataIndex: 'studentName',
        },
        {
          title: '所属小组',
          align: 'center',
          dataIndex: 'groupNo',
        },
        {
          title: '性别',
          align: 'center',
          dataIndex: 'sex',
          key: 'sex',
          scopedSlots: { customRender: 'sex' },
        },
        {
          title: '锻炼时间',
          align: 'center',
          dataIndex: 'exerciseTime',
        },
        {
          title: '文字说明',
          align: 'center',
          dataIndex: 'remark',
          // 将样式作用于td里面的span里，否则样式不生效
          customRender: (text, record) => (
            <a-tooltip placement="bottomRight" title={record.remark}>
              <span
                style={{
                  display: 'inline-block',
                  width: '160px',
                  overflow: 'hidden',
                  whiteSpace: 'nowrap',
                  textOverflow: 'ellipsis',
                  cursor: 'pointer',
                }}
              >
                {record.remark == '' ? '-' : record.remark}
              </span>
            </a-tooltip>
          ),
        },
        {
          title: '锻炼时长',
          align: 'center',
          dataIndex: 'duration',
          scopedSlots: { customRender: 'duration' },
        },
        {
          title: '图片',
          align: 'center',
          dataIndex: 'imgList',
          scopedSlots: { customRender: 'imgSlot' },
        },
        {
          title: '视频',
          align: 'center',
          dataIndex: 'videoList',
          scopedSlots: { customRender: 'videoSlot' },
        },
        {
          title: '提交时间',
          align: 'center',
          dataIndex: 'commitTime',
        },
        {
          title: '状态',
          dataIndex: 'rejectStatus',
          align: 'center',
          scopedSlots: { customRender: 'rejectStatus' },
        },
      ],
      dataSource: [],
      loading: false,
    }
  },
</script>

(1)、数据说明：columns数组是对表头以及每列对应值的设置，前提是你已获得了数据源dataSource，一般从请求里获取，根据数组里对象的“属性名”去依次设置columns；

(2)、处理列内容：就可以使用scopedSlots: { customRender: '属性名' }；在视图里通过slot="属性名" slot-scope="text"就可以操作你要的样式，见上方的“性别”、“图片”、“视频”列；

(3)、超出隐藏，划过全显：在列内容的customRender函数里操作record，将样式作用于td里面的span里，否则样式不生效；

1.3、完整分页

<script>
  data() {
    return {
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '20', '30', '40'], //可选的页面显示条数
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变pageSize
        // onChange: (current, pageSize) => {
        //   this.pagination.current = current
        //   this.pagination.pageSize = pageSize
        //   this.getRejectRecord()
        // }, //页数改变
        // showSizeChange: (current, pageSize) => {
        //   this.pagination.current = current
        //   this.pagination.pageSize = pageSize
        //   this.getRejectRecord()
        // }, //页码改变
      },
    }
  },
 methods:{
   //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.getRejectRecord();//获取表格数据
    },
    getRejectRecord() {
      var that = this
      const { current, pageSize } = that.pagination
      const params = {
        pageNo: current,
        pageSize: pageSize,
      }
      that.loading = true
      postAction(that.url.list, params).then((res) => {
        if (res.success) {
          that.dataSource = res.result.records || res.result
          if (res.result.total) {
            that.pagination.total = res.result.total
          } else {
            that.pagination.total = 0
          }
          that.loading = false
        } else {
          that.$message.warning(res.message)
        }
      })
    },
}
</script>

1.4、表头列颜色设置

        {
          title: '该列字体是黄色',
          align: 'center',
          dataIndex: 'freeExercise',
          className:'manually',//自定义
        },
/deep/ .manually{
  color: #eca712 !important;
}

二、Tag标签

<div class="team-collections">
        <!-- 小组集合-->
        <a-tag
          closable
          class="group-items"
          v-for="(item, index) in groupLists"
          :key="index"
          :color="activationIndex == index ? '#3388F9' : ''"
          @close.prevent="preventDefault(item)"
          @click="clickGroup(index)"
        >
          {{ `第${item.groupNo}组` }}
        </a-tag>
<a-button type="primary" @click="addGroups" icon="plus" v-if="groupLists.length > 0">添加小组</a-button>
</div>
<script>
  data() {
    return {
      groupLists: [],
      activationIndex: 0,
    }
  },
 methods:{
    //点击切换小组
    clickGroup(i) {
      this.activationIndex = i
    },
    // 删除小组
    preventDefault(item) {
      if (this.tableList.length == 0) {
        deleteAction(this.url.deleteGroup, { id: item.id }).then((res) => {
          if (res.success) {
            this.$message.success('删除成功！')
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.warning('该小组已经有学生选择了，不可删除!');//通过修饰符.prevent阻止close事件被触发
      }
    },
}
</script>

2.1、根据条件显示不同颜色

举个例子：

:color="activationIndex == index ? '#3388F9' : ''"
:color="text == 2 ? 'red' : 'green'"

2.2、控制关闭事件

点击X删除该小组(tag),如果满足条件就删除，否则就触发删除事件，在这里就通过修饰符.prevent阻止close事件被触发