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

比眉伴天荒 2024-03-25 20:57 70阅读 0赞

> **目录**
> 
> 一、按钮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>
> 
> **有用请点赞，养成良好习惯！**
> 
> **疑问、交流、鼓励请留言！**

--------------------