【记录：vue2表格项设置排序】

贝果宝~

已于 2022-11-17 14:05:25 修改

阅读量300

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-11-17 13:57:53 首次发布

本文链接：https://blog.csdn.net/yanlingLuo98/article/details/127902494

版权

1. 视图效果截图

2. 主要组件

el-table、el-popover

3. 代码块

// html
  		 <el-table-column
                label="排序"
                prop="status"
                min-width="60"
                align="center"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
                  <el-popover
                    v-model="visibleSort[scope.row.index]"
                    placement="top"
                    width="290"
                    trigger="click"
                  >
                    <el-row :gutter="18" style="padding:5px;">
                      <el-col :span="3.5">
                        <el-input
                          v-model="changedSort[scope.row.index]"
                          size="mini"
                          style="width:140px;"
                        />
                      </el-col>
                      <el-col :span="3.5">
                        <el-button
                          size="mini"
                          icon="el-icon-check"
                          type="primary"
                          @click="okEvent(scope.row)"
                        />
                        <el-button
                          size="mini"
                          icon="el-icon-close"
                          @click="closeEvent(scope.row)"
                        />
                      </el-col>
                    </el-row>
                    <el-button
                      slot="reference"
                      size="mini"
                      class="slotReferenceBtn"
                      :disabled="scope.row.haseditsort !== 1"
                    >
                      {{ scope.row.status }}
                    </el-button>
                  </el-popover>
                </template>
            </el-table-column>

// js
<script>
export default {
  data(){
    visibleSort: [],
    changedSort: [],
  },
  methods:{
  async getTableData (searchObj, page) {
      this.loading = true
       // 调用表格数据接口
      this.hasadd = res.data.hasadd
      this.tableData = res.data.datalist.data
      this.titlelist = res.data.titlelist
      this.pageObj.currentPage = res.data.datalist.current_page
      this.pageObj.total = res.data.datalist.total
      this.pageObj.perPage = res.data.datalist.per_page
      this.tableData.forEach(async (item, index) => {
        item['download'] = '▼More'
        item['detail'] = []
        item['firstOpen'] = true
        item['index'] = index
        this.$set(this.visibleSort, index, false)
        this.$set(this.changedSort, index, item.status)
      })
      //   console.log(res, 'res')
      // 切换页面table滚动条置顶
      this.$refs.refTable.bodyWrapper.scrollTop = 0
      this.loading = false
    },
      // 改变排序
    changeSortEvent (row) {
      this.$set(this.visibleSort, row.index, true)
    },
    // 排序确认
    okEvent (row) {
      //   console.log(row, 'row')
      //   console.log(this.changedSort, 'changedSort')
      this.$set(this.visibleSort, row.index, false)
      projectinit({
        action: 'sorteidt',
        thefirid: row.id,
        status: this.changedSort[row.index]
      }).then(res => {
        if (parseInt(res.code) === 1) {
          this.$message.success({ message: res.msg })
          this.getTableData(this.searchObj)
        }
      })
    },
    closeEvent (row) {
      this.$set(this.visibleSort, row.index, false)
    }
  }
}
</script>