agri-app/pages/mine/require/index.vue

<template>
  <view>
    <view class="uni-container">
      <!-- 1. 给table加宽度100%，关闭默认固定列宽 -->
      <uni-table
          ref="table"
          :loading="loading"
          border
          stripe
          type="selection"
          emptyText="暂无更多数据"
          @selection-change="selectionChange"
          style="width: 100%;"
      :border-width="1"
      >
      <uni-tr>
        <!-- 2. 列宽设为auto（自适应），调整表头行高 -->
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">选择</uni-th>
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">需求标题</uni-th>
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">需求详情</uni-th>
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">优先级</uni-th>
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">进度</uni-th>
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">需求类型</uni-th>
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">经办人名称</uni-th>
        <uni-th align="center" style="width: auto; height: 30px; line-height: 30px;">操作</uni-th>
      </uni-tr>
      <!-- 3. 缩小表格行高 -->
      <uni-tr v-for="(item, index) in tableData" :key="index" style="height: 35px; line-height: 35px;">
        <uni-td style="width: auto; padding: 2px 0;">
          <uni-checkbox :value="index" @change="handleCheckboxChange"></uni-checkbox>
        </uni-td>
        <uni-td style="width: auto; padding: 2px 0;">{{ item.title }}</uni-td>
        <uni-td style="width: auto; padding: 2px 0;">
          <view class="name">{{ item.detail }}</view>
        </uni-td>
        <uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.priority }}</uni-td>
        <uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.progress }}</uni-td>
        <uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.reqType }}</uni-td>
        <uni-td align="center" style="width: auto; padding: 2px 0;">{{ item.assigneeName }}</uni-td>
        <uni-td style="width: auto; padding: 2px 0;">
          <view class="uni-group">
            <!-- 4. 缩小按钮尺寸 -->
            <button class="uni-button" size="mini" type="primary" style="padding: 2px 8px; font-size: 12px;">修改</button>
            <button class="uni-button" size="mini" type="warn" style="padding: 2px 8px; font-size: 12px; margin-left: 5px;">删除</button>
          </view>
        </uni-td>
      </uni-tr>
      </uni-table>
      <view class="uni-pagination-box" style="margin-top: 10px;">
        <uni-pagination
            show-icon
            :page-size="pageSize"
            :current="pageCurrent"
            :total="total"
            @change="change"
            style="font-size: 12px;"
        />
      </view>
    </view>
  </view>
</template>

<script>
import UniTh from "../../../uni_modules/uni-table/components/uni-th/uni-th.vue";
import UniTr from "../../../uni_modules/uni-table/components/uni-tr/uni-tr.vue";
import UniTd from "../../../uni_modules/uni-table/components/uni-td/uni-td.vue";
import UniPagination from "../../../uni_modules/uni-pagination/components/uni-pagination/uni-pagination.vue";
import { listRequire } from "../../../api/system/require";
import UniTable from "../../../uni_modules/uni-table/components/uni-table/uni-table.vue";

export default {
  components: {UniTable, UniPagination, UniTd, UniTr, UniTh },
  data() {
    return {
      searchVal: '',
      tableData: [],
      pageSize: 10,
      pageCurrent: 1,
      total: 0,
      loading: false,
      selectedIndexs: [] // 已选择的行索引
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    // 多选处理
    selectedItems() {
      return this.selectedIndexs.map(i => this.tableData[i])
    },
    // 多选（替换原selection-change，适配自定义checkbox）
    handleCheckboxChange(e, index) {
      if (e.detail.value) {
        this.selectedIndexs.push(index)
      } else {
        this.selectedIndexs = this.selectedIndexs.filter(item => item !== index)
      }
    },
    // 批量删除
    delTable() {
      console.log(this.selectedItems())
    },
    // 分页触发
    change(e) {
      this.selectedIndexs = []
      this.getData(e.current)
    },
    // 搜索
    search() {
      this.getData()
    },
    // 获取数据
    getData(pageCurrent) {
      this.loading = true
      this.pageCurrent = pageCurrent || this.pageCurrent
      const queryParams = {
        imei: this.imei,
        pageNum: this.pageCurrent,
        pageSize: this.pageSize,
      }
      listRequire(queryParams).then(response => {
        if (response.code === 200 && response.rows) {
          this.tableData = response.rows
          this.total = response.total
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
/* 适配微信小程序，取消页面默认padding */
page {
  padding-top: 0 !important;
}

.uni-container {
  padding: 10px;
  box-sizing: border-box; /* 保证padding不超出屏幕 */
}

.uni-group {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 缩小需求详情的行高 */
.name {
  line-height: 20px;
  font-size: 12px;
}
</style>