赞
踩
- <template>
- <div>
- <el-table :data="dataSource" style="width: 100%">
- <template v-for="(column, ind, key) in columns" :key="column">
- <el-table-column v-if="column.scopeVal" :prop="column.prop" :label="column.label">
- <template #default="scope">
- <slot
- :column="column"
- :record="scope.row"
- :text="scope.row[column.prop]"
- :index="dataSource.indexOf(scope.row)"
- :name="column.prop">
- </slot>
- </template>
- </el-table-column>
- <el-table-column v-else :prop="column.prop" :label="column.label" />
- </template>
- </el-table>
- </div>
- </template>
-
- <script>
- import reactive from 'vue'
-
-
- export default {
- props: {
- dataSource: Array,
- columns: Array,
- }
- }
- </script>
- <template>
- <el-card>
- <my-table :columns="columns" :dataSource="dataSource">
- <template #method="{ index }">
- <my-select :options="method_options" v-model="dataSource[index].method" placeholder="待选择"></my-select>
- </template>
- <template #value="{ index }">
- <el-input v-model="dataSource[index].value" placeholder="待填写"></el-input>
- </template>
- <template #text="{ index }">
- <el-input v-model="dataSource[index].text" placeholder="待填写"></el-input>
- </template>
- <template #notes="{ column, record, text, index }">
- <el-input v-model="dataSource[index].notes" placeholder="待填写"></el-input>
- </template>
-
- <template #action="{ index }" class="action">
- <el-link><el-icon><CirclePlusFilled /></el-icon></el-link>
- <el-link><el-icon><RemoveFilled /></el-icon></el-link>
- <el-link><el-icon><ArrowUpBold /></el-icon></el-link>
- <el-link><el-icon><ArrowDownBold /></el-icon></el-link>
- </template>
- </my-table>
- </el-card>
- </template>
-
- <script setup>
- import { reactive, ref } from "vue"
- import myTable from "../../components/table/myTable.vue";
- import mySelect from "../../components/select/myselect.vue"
-
-
- components: { myTable, mySelect }
-
- const method_options = [
- {
- label: '访问',
- value: '访问'
- },
- {
- label: '点击',
- value: '点击'
- },
- {
- label: '输入',
- value: '输入'
- },
- {
- label: '断言',
- value: '断言'
- },
- ]
-
- const columns = reactive([
- {
- label: '方法',
- prop: 'method',
- scopeVal: true,
- },
- {
- label: '元素定位',
- prop: 'value',
- scopeVal: true,
- },
- {
- label: '输入',
- prop: 'text',
- scopeVal: true,
- },
- {
- label: '备注',
- prop: 'notes',
- scopeVal: true,
- },
- {
- label: '状态',
- prop: 'status',
- },
- {
- label: '操作',
- prop: 'action',
- scopeVal: true,
- },
- ])
-
- let dataSource = reactive([
- {
- method: '访问',
- value: '',
- text: 'http://www.baidu.com',
- notes: '访问百度',
- status: '待运行',
- },
- {
- method: '点击',
- value: '//*[@id=kw]',
- text: '',
- notes: '点击搜索框',
- status: '待运行',
- },
- ])
通过作用域插槽传递以下4个参数供使用
column:表头
record:当前行数据
text:当前单元格数据
index:当前行索引
若要自定义某一列的元素,在column中的对应列名下加上scopeVal: true
最近在慢慢转vue3,过程中还是用vue2的写法和思维去写,虽说vue3兼容vue2,但有些地方还是有点区别,在作用域插槽上也花了点时间。。。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。