el-table嵌入输入框下拉框按钮等等

目录

一、按钮el-button

二、输入框el-input

三、下拉框el-select

一、按钮el-button

  <el-table-column fixed="right" label="操作" width="100">
    <template slot-scope="scope">
      <el-button type="text" size="mini" :disabled="disFlag" @click="balabala(scope.row)">编辑</el-button>
    </template>
    <template slot-scope="scope">
      <el-button type="text" size="mini" @click="bala(scope.row)">详情</el-button>
    </template>
  </el-table-column>

    //balabala
    balabala(row) {
      this.$router.push(
        "/bala/gaga/detail?
        id=" + row.id +
        "&name=" + row.name
      );
    },

    //bala
    bala: function (row) {
      this.$router.push({
        path: "/bala/neinei/detail",
        query: {
          id: row.id,
          name: row.name,
          type: row.type,
        },
      });
    },

二、输入框el-input

    <el-table-column prop="reality_fans" label="输入框" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-input v-model="scope.row.remark" @change="changeInput"  placeholder="请输入内容" ></el-input>
                </template>
    </el-table-column>

三、下拉框el-select

  <el-table-column prop="type" label="类型" width="120">
    <template scope="scope">
      <el-select v-model="scope.row.type" @change="handleCell(scope.$index, scope.row)">
        <el-option v-for="item in typeList" :key="item.value" :label="item.label" 				 :value="item.value">
        </el-option>
      </el-select>
    </template>
  </el-table-column>

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！