在table列表内写开关，下拉框操作

最新推荐文章于 2024-06-28 15:08:59 发布

忒子

最新推荐文章于 2024-06-28 15:08:59 发布

阅读量579

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/weixin_53363875/article/details/120225702

版权

<template>
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered="bordered"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
     >

          
         <span slot="selectType" slot-scope="text, record, index">
           <a-select
             style="width: 65%"        
             :value="text"
             placeholder="请选择类型"
             @change="e => handleChange(e, index)"
           >
              <a-select-option value="">请选择类型</a-select-option>
              <a-select-option value="ZX">
                中性
              </a-select-option>
              <a-select-option value="XX">
              小型
              </a-select-option>
            </a-select>
          </span>


            <span slot="isKey" slot-scope="text, record">
          //一个点击事件 并传值
             <a-switch
                @click="handleIsKey(record)"
                 :checked="record.isKey=== 'Y' ?  true : false"/>
          </span>
        </a-table>
    </div>
</template>
<script>
export default {
 name: "Modal",
 data () {
    return {
//定义全局的值，方便传参
     type: '',
     isKey:'',
  columns: [
          {
              title: '状态',
              dataIndex: 'isKey',
              ellipsis: true,
              align:"center",
              customRender:function (t, r, index) {
                if (t === 'Y') {
                  return "打开";
                } else if (t === 'N') {
                  return "关闭";
                }
          },
          {
              title: '类型',
              ellipsis: true,
              dataIndex: 'type',
              align: 'center',
              scopedSlots: { customRender: 'selectType' }
        },
       ]
      },
    },
  methods: {
     handleChange(value, index) {
          this.dataSource[index].type = value
          this.$forceUpdate()
          this.type = this.dataSource[index].type
          console.log( this.type, '输出类型')
     },
     handleIsKey(record) {
          this.loading = true
          //判断传入的参数
          if(record.isKey === 'Y'){
            this.isKey = 'N'
          }else{
            this.isKey = 'Y'
     },
     if (!this.type) {
          this.$message.error('请选择类型')
          this.loadData(1)
          return false
      }
      let params = {
          isKey: this.isKey,
          type: this.type,
      };
      putAction("/modal/modal/edit" ,params).then((res) => {
        if (res.success) {
          if(res.success){
            this.$message.success(res.message)
          }else{
            this.$message.error(res.message)
          }
          this.loadData()
        }else{
          this.loading = false
          this.$message.error("开启失败，请稍后重试!")
        }
      })
    }
   }
  }
</script>