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、显示表格

html 复制代码
    <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、列内容过长省略展示

javascript 复制代码
<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、完整分页

javascript 复制代码
<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、表头列颜色设置

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

二、Tag标签

html 复制代码
<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、根据条件显示不同颜色

举个例子:

html 复制代码
:color="activationIndex == index ? '#3388F9' : ''"
:color="text == 2 ? 'red' : 'green'"

2.2、控制关闭事件

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

相关推荐
Moon里24 分钟前
【CSS】字体文本
前端·css
Jonathan Star4 小时前
两个圆形 一个z里面一个z外面,z里面的大,颜色不同 html
前端·html
洛小豆5 小时前
前端开发必备:三种高效定位动态类名元素的 JavaScript 技巧
开发语言·前端·javascript·面试
啵一杯5 小时前
leetcode621. 任务调度器
服务器·前端·数据结构·算法·c#
2401_857297916 小时前
2025校招内推-招联金融
java·前端·算法·金融·求职招聘
琴~~7 小时前
前端全屏模式切换
前端·javascript
东方小月7 小时前
JavaScript中的随机函数Random的妙用
前端·javascript
有盐、在见7 小时前
前段辅助工具分享(像素大厨)
javascript
林九生8 小时前
【React】(推荐项目)使用 React、Socket.io、Nodejs、Redux-Toolkit、MongoDB 构建聊天应用程序 (2024)
前端·mongodb·react.js
customer088 小时前
【开源免费】基于SpringBoot+Vue.JS墙绘产品展示交易平台(JAVA毕业设计)
java·jvm·vue.js·spring boot·后端·spring cloud·开源